CSS3夜空月亮动画特效
纯 CSS3 的夜晚天空月亮动画，挺有意思的。没有用一行 JavaScript，全靠 CSS 搞定，像月亮升起来、星星闪啊闪，全是用@keyframes、transition这套东西做的。想练动画手感的，这个效果可以试试，不仅样子漂亮，写法也挺规整。
伪元素加::before、::after，让你不用多写 HTML 结构就能塞出月亮、星星这些小元素，页面也干净不少。配合position: absolute，定位也灵活。
渐变背景是亮点之一，linear-gradient配合radial-gradient，轻松搞出夜空氛围。加点filter: blur()，整个视觉层次就出来了。用得巧，效果不输图像素材。
响应式设计也没拉下，@media写得清晰，手机上也能正常显示，适配做得还不错。虽然项目里有js目录，但代码基本靠css和html撑起来的，干净利落。
动画用法也规范，@keyframes定义月亮的轨迹、旋转啥的，细节不少，调节起来也方便。如果你正好想练练纯 CSS 动画，不妨拿这个练练手，还挺有成就感的。
顺带推荐几个相关的动画效果文章，有兴趣可以一起看看：
如果你写惯了 JavaScript 动画，不妨回头看看 CSS 这套，逻辑简单，加载也快，说不定哪天就能派上用场。
文件大小：292.46KB
评论区