No matter how skilled you are as a programmer, how well you can solve all kinds of problems, in the end, you will still want to use code to confess your feelings.
———— A wise but unknown senior
Inspiration from @Wang Zi Zhou Qi Luo and many other seniors on Bilibili
Tip
Demo site: https://crain.kiss1314.top
This project implements an interactive cyber hand-drawn envelope with just a few simple lines of css and js. The badge on the envelope is created using the open-source project appicon-forge. The effect when it is closed is as follows:
- 🌟 Mobile Adaptation
Responsive and adaptive layout is used to ensure a smooth experience on mobile devices.
- 🌟 Colorful Anniversaries
The top left corner of the envelope dynamically updates the number based on the anniversary you set.
- 🌟 Loading Screen and Resource Preloading
A simple loading screen is used, and all resources are preloaded with timeout handling, so you don't have to worry about the network speed of your friends who are on Mars.
- 🌟 Smoothness Defined
Fading in and out, smooth transitions, everything is silky;
I painstakingly made the image transitions fade in and out crosswise, and the motion blur effect even makes animations that are only a few frames look smooth.
- 🌟 Highly Extensible
I’ve left some materials that can be replaced. Additionally, there are pre-made features that you can easily enable by uncommenting them.
For the animation part, I used Promise and callback functions to address asynchronous programming issues, making it easy to add more animations later.
if (Your goddess doesn't know how to open a URL || You don’t have a beautiful domain name) {
You can deploy this web project and embed it into an NFC 216 chip;
The chip can be placed inside a photo frame 🖼 or other small items. Then, your goddess just needs to tap her phone (especially if she’s using an iPhone, which has NFC enabled by default),
and she’ll be able to see this cyber letter.
}
else {
You can directly send your domain name to your goddess via WeChat and tell her it’s a mysterious code,
which will still be a pleasant surprise 🎁.
However, a friendly reminder:
if (Your domain is not registered in China( also known ad '备案' in Chinese ) {
You’ll need to register it first to guarantee the accessibility in Chinese mainland, or there might be a warning ❎;
}
else if (Your domain isn't one of the common domains like .com, .cn, or .top) {
WeChat might not recognize it, and your goddess could be confused 💢;
}
else
Good luck to you!
}