首先我们来制作HTML部分
我们第一步呢还是先定义变量，loader，然后我们在下面在定义一个snow代表雪花，下面定义各自的变量，让20片雪花随机下滑
<div class="loader"> <div class="snow"> <span style="--i:11"></span> <span style="--i:12"></span> <span style="--i:15"></span> <span style="--i:17"></span> <span style="--i:18"></span> <span style="--i:13"></span> <span style="--i:14"></span> <span style="--i:19"></span> <span style="--i:20"></span> <span style="--i:10"></span> ...... </div> </div>
css部分
这里使用了伪类选择器
第一是做我们云朵的形状：我们先得设置相对定位，这样雪花才能来到我们下面
然后我们使用圆角边框，第二步我们来写伪元素，用伪元素画两个圆通过位置改变来组成云朵
第三个使用伪元素来设置雪花和雪花的动画效果
body{ display: flex; align-items: center; justify-content: center; background-color: black; transform: translateY(100px); } .loader{ position: relative; width: 110px; height: 30px; background-color: #fff; border-radius: 100px; } .loader::before{ content: ''; position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 50%; box-shadow: 40px 0 0 20px #fff; left: 10px; top: -20px; } .snow{ position: relative; display: flex; z-index: 1; } .snow span{ position: relative; width: 3px; height: 3px; background-color: #fff; margin: 0 2px; border-radius: 50%; animation: snowing 5s linear infinite; animation-duration: calc(15s / var(--i)); } @keyframes snowing{ from{ transform: translateY(0px); } 70%{ transform: translateY(100px) scale(1); } to{ transform: translateY(100px) scale:(0); } }
接下来展示源码！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ display: flex; align-items: center; justify-content: center; background-color: black; transform: translateY(100px); } .loader{ position: relative; width: 110px; height: 30px; background-color: #fff; border-radius: 100px; } .loader::before{ content: ''; position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 50%; box-shadow: 40px 0 0 20px #fff; left: 10px; top: -20px; } .snow{ position: relative; display: flex; z-index: 1; } .snow span{ position: relative; width: 3px; height: 3px; background-color: #fff; margin: 0 2px; border-radius: 50%; animation: snowing 5s linear infinite; animation-duration: calc(15s / var(--i)); } @keyframes snowing{ from{ transform: translateY(0px); } 70%{ transform: translateY(100px) scale(1); } to{ transform: translateY(100px) scale:(0); } } </style> </head> <body> <div class="loader"> <div class="snow"> <span style="--i:11"></span> <span style="--i:12"></span> <span style="--i:15"></span> <span style="--i:17"></span> <span style="--i:18"></span> <span style="--i:13"></span> <span style="--i:14"></span> <span style="--i:19"></span> <span style="--i:20"></span> <span style="--i:10"></span> ...... </div> </div> </body> </html>
