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

来源：动视网责编：小采时间：2020-11-27 18:51:27

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

纯CSS3打造逼真的多层云彩动画特效: 简要教程这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩PNG图片作为背景图片，使用CSS animation动画来制作云彩水平飘动的动画效果。查看源码下载插件使用方法 HTML结构该多层云彩动画效果的HTML结构非常简单：使

推荐度：

点击下载本文 文档为doc格式

导读纯CSS3打造逼真的多层云彩动画特效: 简要教程这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩PNG图片作为背景图片，使用CSS animation动画来制作云彩水平飘动的动画效果。查看源码下载插件使用方法 HTML结构该多层云彩动画效果的HTML结构非常简单：使

　　简要教程

　　这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效。该特效使用多张透明的云彩PNG图片作为背景图片，使用CSS animation动画来制作云彩水平飘动的动画效果。

查看源码下载插件

　　使用方法

　　HTML结构

　　该多层云彩动画效果的HTML结构非常简单：使用一个p.sky作为天馈的背景层，在它的里面放置多个子<p>作为云彩容器。

<p class="sky">
 <p class="clouds_one"></p>
 <p class="clouds_two"></p>
 <p class="clouds_three"></p>
</p>

　　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打造逼真的多层云彩动画特效

推荐度：

点击下载本文 文档为doc格式

标签：纯css3打造逼真的多层云彩动画特效纯css3逼真的多层云彩动画特效 css3打造逼真的多层云彩动画特效

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐