本文主要是介绍纯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);}
}这篇关于纯Html CSS实现云雨动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
