CSS3 实现飘动的云朵动画
程序员文章站
2022-07-02 19:27:25
运行效果html css3 cloud animations by montana fl...</div>
<div class="content">
<p>运行效果</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="CSS3 实现飘动的云朵动画" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMDIvYl8wXzIwMjAxMjAyMTkxMzUwMzExMS5wbmc=" title="CSS3 实现飘动的云朵动画"></p>
<p>html</p>
<div class="jb51code">
<pre class="brush: css;">
<head>
<meta charset='utf-8'>
<title>css3 cloud animations by montana flynn</title>
</head>
<body>
<div class="sky">
<div class="moon"></div>
<div class="clouds_two"></div>
<div class="clouds_one"></div>
<div class="clouds_three"></div>
</div>
</body></pre>
</div>
<p>css</p>
<div class="jb51code">
<pre class="brush: css;">
html, body {
margin: 0;
height: 100%
}
.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;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.moon {
background: url("http://i.imgur.com/wfxd68n.png");
position: absolute;
left: 0;
height: 300%;
width: 300%;
-webkit-animation: moon 50s linear infinite;
-moz-animation: moon 50s linear infinite;
-o-animation: moon 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_one {
background: url("http://www.scri8e.com/stars/png_clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgtype=3&h1=50&w1=140");
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;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_two {
background: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_two 75s linear infinite;
-moz-animation: cloud_two 75s linear infinite;
-o-animation: cloud_two 75s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_three {
background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_three 100s linear infinite;
-moz-animation: cloud_three 100s linear infinite;
-o-animation: cloud_three 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-moz-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}</pre>
</div>
<p>以上就是css3 实现飘动的云朵动画的详细内容，更多关于css3 飘动的云的资料请关注其它相关文章！</p>
<div class="clearfix">
<span id="art_bot" class="jbtestpos"></span>
</div> </div>
<div class="tags">
相关标签： <a href="/t/%E4%BA%91/" target="_blank">
云 </a>
<a href="/t/%E9%A3%98%E5%8A%A8/" target="_blank">
飘动 </a>
<a href="/t/CSS3/" target="_blank">
CSS3 </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1614400.html">
Android中将Activity转化为Dialog </a>
</p>
<p>
下一篇： <a href="/article/1614402.html">
java虚拟机是做什么用的 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2085545.html" target="_blank" title="AE表达式实现伸缩拉长的动画效果">
<h2>
AE表达式实现伸缩拉长的动画效果 </h2>
</a>
</li>
<li>
<a href="/article/2080715.html" target="_blank" title="Android实现购物车添加物品的动画效果">
<h2>
Android实现购物车添加物品的动画效果 </h2>
</a>
</li>
<li>
<a href="/article/2077505.html" target="_blank" title="基于jquery和svg实现超炫酷的动画特效">
<h2>
基于jquery和svg实现超炫酷的动画特效 </h2>
</a>
</li>
<li>
<a href="/article/2077516.html" target="_blank" title="jquery和css3实现的炫酷时尚的菜单导航">
<h2>
jquery和css3实现的炫酷时尚的菜单导航 </h2>
</a>
</li>
<li>
<a href="/article/2077081.html" target="_blank" title="使用简单的CSS3属性实现炫酷读者墙效果">
<h2>
使用简单的CSS3属性实现炫酷读者墙效果 </h2>
</a>
</li>
<li>
<a href="/article/2077077.html" target="_blank" title="CSS3绘制超炫的上下起伏波动进度加载动画">
<h2>
CSS3绘制超炫的上下起伏波动进度加载动画 </h2>
</a>
</li>
<li>
<a href="/article/2077062.html" target="_blank" title="css3的@media属性实现页面响应式布局示例代码">
<h2>
css3的@media属性实现页面响应式布局示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2077073.html" target="_blank" title="带有css3动画效果的兼容多浏览器简单导航条示例">
<h2>
带有css3动画效果的兼容多浏览器简单导航条示例 </h2>
</a>
</li>
<li>
<a href="/article/2076953.html" target="_blank" title="纯css3显示隐藏一个div特效的具体实现">
<h2>
纯css3显示隐藏一个div特效的具体实现 </h2>
</a>
</li>
<li>
<a href="/article/2077014.html" target="_blank" title="6种非常炫酷的CSS3按钮边框动画特效">
<h2>
6种非常炫酷的CSS3按钮边框动画特效 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>