CSS 空中飘动的云动画
生活随笔
收集整理的這篇文章主要介紹了
CSS 空中飘动的云动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
轉載于:https://www.cnblogs.com/libin-1/p/6284437.html
總結
以上是生活随笔為你收集整理的CSS 空中飘动的云动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TOMCAT虚拟路径配置
- 下一篇： CSS精灵图合成工具