HTML+CSS实现一个炫酷的切换动画效果

实现原理

背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。

日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°,看上去就是太阳落下然后月亮升起来了……

动画演示

图片[1]-HTML+CSS实现一个炫酷的切换动画效果-宅学院

代码

参考资料:
1.Good Morning, Goodnight.Nanou.https://codepen.io/jackiezen/pen/WMavEV
2.卡通日出日落CSS3动画特效.站长素材.http://demo.sc.chinaz.net/Files/DownLoad/webjs1/202004/jiaoben7518/


© 版权声明
THE END
支持博主,更新加速
点赞0赞助 分享
我有话说 共1条