怎么用纯CSS3打造逼真的多层云彩动画特效
这篇文章主要介绍了怎么用纯CSS3打造逼真的多层云彩动画特效的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用纯CSS3打造逼真的多层云彩动画特效文章都会有所收获,下面我们一起来看看吧。
十余年的双阳网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整双阳建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“双阳网站设计”,“双阳网站推广”以来,每个客户项目都认真落实执行。
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打造逼真的多层云彩动画特效”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
当前名称:怎么用纯CSS3打造逼真的多层云彩动画特效
本文来源:http://pwwzsj.com/article/gdcddd.html