怎么用纯CSS3打造逼真的多层云彩动画特效

这篇文章主要介绍了怎么用纯css3打造逼真的多层云彩动画特效的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用纯CSS3打造逼真的多层云彩动画特效文章都会有所收获，下面我们一起来看看吧。

　　CSS样式

　　作为天空背景的.sky元素设置一个固定的高度，采用相对定位，并使用overflow: hidden;来隐藏超出范围的元素。开始时天空的颜色设置为一个较浅的蓝色#007fd5。然后为天空背景设置了一个sky_background的CSS3 animation动画，该动画在50秒的时间内，将天空背景的颜色由浅蓝色过渡到深蓝色，动画的animation-timing-function为ease-out，动画的迭代次数animation-iteration-count为无限循环。

　　在该特效中，每一个元素都被设置了transfORM: translate3D(0, 0, 0)属性，该属性用于开启GPU的3D效果，提高显示的性能。

　　.sky {

　　height: 480px;

　　background: #007fd5;

　　position: relative;

　　overflow: hidden;

　　-WEBkit-animation: sky_background 50s ease-out infinite;

　　-moz-animation: sky_background 50s ease-out infinite;

　　-o-animation: sky_background 50s ease-out infinite;

　　animation: sky_background 50s ease-out infinite;

　　-webkit-transform: translate3d(0, 0, 0);

　　-ms-transform: translate3d(0, 0, 0);

　　-o-transform: translate3d(0, 0, 0);

　　transform: translate3d(0, 0, 0);

　　}

　　@keyframes sky_background {

　　0% {

　　background: #007fd5;

　　color: #007fd5

　　}

　　50% {

　　background: #000;

　　color: #a3d9ff

　　}

　　100% {

　　background: #007fd5;

　　color: #007fd5

　　}

　　}

　　云层1使用第一幅云彩PNG图片作为背景图片，使用绝对定位，相对于天空容器左对齐。高度和天空相等，宽度为天空容器的3倍。并执行cloud_one CSS3动画。该动画修改云彩层的left属性，使云彩水平移动。

　　.clouds_one {

　　background: url("img/cloud_one.png");

　　position: absolute;

　　left: 0;

　　top: 0;

　　height: 100%;

　　width: 300%;

　　-webkit-animation: cloud_one 50s linear infinite;

　　-moz-animation: cloud_one 50s linear infinite;

　　-o-animation: cloud_one 50s linear infinite;

　　animation: cloud_one 50s linear infinite;

　　-webkit-transform: translate3d(0, 0, 0);

　　-ms-transform: translate3d(0, 0, 0);

　　-o-transform: translate3d(0, 0, 0);

　　transform: translate3d(0, 0, 0);

　　}

　　@keyframes cloud_one {

　　0% {

　　left: 0

　　}

　　100% {

　　left: -200%

　　}

　　}

　　云彩2和云彩3的CSS3动画基本类似云彩1，只是动画的持续时间animation-duration不相同，云彩1的持续时间 为50秒，云彩2的持续时间为75秒，云彩3的持续时间为100秒。这样各个云层的动画时间各不相同，会得到一些背景视觉差的效果。

关于“怎么用纯CSS3打造逼真的多层云彩动画特效”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用纯CSS3打造逼真的多层云彩动画特效”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网VUE频道。