空中飘动的云动画
2018-06-24 00:54:19来源:未知 阅读 ()
步骤:1.创建五朵云;
2.给云朵添加不同样式和位置;
3.让这些云朵以不同的速度穿过屏幕;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天空飘着五朵云</title>
<style>
*{ margin: 0; padding: 0;}
body {
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
position: relative;
}
.cloud:before , .cloud:after {
content: '';
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; right: 15px;left: auto;
}
.x1 {
animation: moveclouds 15s linear infinite;
}
.x2 {
left: 200px;
transform: scale(0.6);
opacity: 0.6;
animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
transform: scale(0.8);
opacity: 0.8;
animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
transform: scale(0.75);
opacity: 0.75;
animation: moveclouds 18s linear infinite;
}
.x5 {
left: 350px; top: -150px;
transform: scale(0.8);
opacity: 0.8;
animation: moveclouds 20s linear infinite;
}
@keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
</style>
</head>
<body>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
</body>
</html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 6.动画 2020-05-24
- 移动端常见问题(动画演示) 2020-03-17
- CSS3如何利用粒子旋转伸缩加载动画 2020-03-13
- HTML连载73-动画连写、图片连续变化 2020-03-08
- HTML连载72-动画效果及其他属性 2020-03-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash