CSS 空中飘动的云动画
2023-09-27 14:28:21 时间
<!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动画实例:SierPinski地毯
- CSS动画实例:跳跃的字符
- CSS动画实例:旋转的圆角正方形
- 【v2.x OGE-example 第三节 播放精灵动画】
- Flutter 底部向上弹出的动画按钮
- [Unity菜鸟] FBX模型动画提取
- 微信小程序 - 页面背景音乐播放器控件(音乐盒图标旋转 360° 动画且可点击暂停与播放)
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- CSS - 元素旋转动画(360度转圈)
- XamarinAndroid组件教程RecylerView动画组件使用动画(3)
- css 加载中省略号动画
- iOS 自定义转场动画
- SwiftUI 动画大全之带有 背景音乐的气泡动画(教程含源码)
- css动画 transform
- 利用 CSS animation 和 CSS sprite 制作动画
- CSS动画(二)---深入理解animation动画(纯干货)
- CSS动画(一)快速入门掌握
- 有趣的HTML实例(五) 加载页面动画Ⅱ(css)
- css实现加入购物车动画(水平抛物线)
- Android View体系(三)属性动画
- 使用SVG生成的奔跑吧兄弟的动画效果
- <图形图像,动画,多媒体> 读书笔记 --- 录制与编辑视频
- css心跳动画
- CSS动画总结效果
- Silverlight 动画详解