CSS动画+Canvas春节对联页面效果
春节的对联动画页面，靠的就是CSS 动画和Canvas的巧妙配合。对联滑出来的效果，其实用的就是@keyframes配合animation，动画流畅还挺有节日气氛。你甚至可以给它加点transform: rotate，模拟风吹摆动的感觉，挺生动的。
飘落的纸片是用Canvas画出来的，核心就是用requestAnimationFrame不断更新位置，模拟下落。纸片的初始位置、颜色、大小都随机，配合点opacity的淡入淡出，看着还挺舒服的。Canvas 这块写好后还能重复用，节日项目通用性蛮强。
对联加点box-shadow或者text-shadow，立体感一下就出来了。布局方面用Flexbox或者Grid都行，响应式挺好搞定。页面结构简单、动画细节丰富，还挺适合当练手项目。
优化也别落下，will-change提前告诉浏览器要动哪些属性，动画更流畅。性能这块注意下opacity比background-color更容易被硬件加速，用对了响应也快。
要是你想打包资源方便分享，可以用zip把index.html、style.css、main.js这些都丢进去，路径别写错，下载解压就能跑起来，蛮适合做成小 demo 发给朋友。
如果你对关键帧动画感兴趣，还可以看看Motus 滚动时模拟 CSS 关键帧动画库，思路也挺巧的，挺值得借鉴。
文件大小：2.89MB
评论区