纯Html CSS实现云雨动画效果

阅读：评论：0

纯Html CSS实现云雨动画效果

纯HTML和CSS实现云雨动画效果，动态效果由CSS实现，主要有两个动画实现

代码下面自取🖖

🎈效果如下

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cloud & Rain Animation</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><div class="cloud"></div><div class="rain"><span style="--i:11"></span><span style="--i:12"></span><span style="--i:10"></span><span style="--i:14"></span><span style="--i:18"></span><span style="--i:16"></span><span style="--i:19"></span><span style="--i:20"></span><span style="--i:19"></span><span style="--i:10"></span><span style="--i:16"></span><span style="--i:14"></span><span style="--i:18"></span><span style="--i:11"></span><span style="--i:13"></span><span style="--i:15"></span><span style="--i:12"></span><span style="--i:11"></span><span style="--i:17"></span><span style="--i:13"></span></div></div>
</body>
</html>

CSS代码如下

*{margin:0;padding: 0;box-sizing: border-box;
}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #181c1f;
}.container{position: relative;height: 400px;border-bottom: 2px solid #fff;
}.cloud{position: relative;top: 50px;width: 320px;height: 100px;background: #fff;border-radius: 100px;
}.cloud::before{content: '';position: absolute;top: -50px;left: 40px;width:110px;height: 110px;background: #fff;border-radius: 50%;box-shadow: 90px 0 0 30px #fff;
}
.rain{position: relative;display: flex;z-index: 1;padding: 0 20px;
}
.rain span{position: relative;bottom: 10px;width: 10px;height: 10px;background-color: rgb(164, 236, 252);margin: 0 2px;border-radius: 50%;animation: animate 5s linear infinite;animation-duration: calc(15s / var(--i));transform-origin: bottom;
}@keyframes animate{0%{transform: translateY(0) scale(1);}70%{transform: translateY(300px) scale(1);}100%{transform: translateY(300px) scale(0);}
}

本文发布于:2024-01-29 03:02:50，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170646857512233.html

上一篇：R

下一篇：R语言如何绘制云雨图（20）

标签：云雨效果动画 Html CSS

留言与评论（共有 0 条评论）