首页 > 代码库 > 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>
CSS 空中飘动的云动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。