其他
【每日一练】49—天气产品里会用到的下雨动画效果
昨天的《【每日一练】48—围绕地球旋转的文本动画效果》的图片素材，我这边打包放在网盘里了，有需要的小伙伴，请自行下载获取。
48练图片素材：https://url81.ctfile.com/f/21793581-653211049-30711c?p=2698
密码: 2698
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>【每日一练】49—下雨动画效果</title></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:17"></span> <span style="--i:13"></span> <span style="--i:15"></span> </div> </div></body></html>*{ 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 #555;}.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: #fff; 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(298px) scale(1); } 100% { transform: translateY(298px) scale(0); }}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号