博客

老样子，先上效果图

一、HTML

<div class="container">

      <div class="cloud">

      </div>

   </div>

二、CSS

/* 常规初始化 */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   /* 水平垂直居中 */
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 100vh;
   background-color: #d3f1f1;
}

/* 云朵 */
.cloud {
   position: relative;
   width: 400px;
   height: 110px;
   background-color: #fff;
   border-radius: 50px;
}

/* 使用伪元素加盒子阴影在云朵上面加两个圆 */
.cloud::before {
   position: absolute;
   top: -65%;
   left: 38%;
   content: '';
   width: 180px;
   height: 180px;
   border-radius: 50%;
   background-color: #fff;

   /* 盒子阴影，左边的小圆 */
   box-shadow: -110px -10px 0px -35px #fff;
}

/* after伪元素是下面的小横线(暂且当做地面) */
.cloud::after {
   position: absolute;
   top: 310px;
   left: 0;
   content: '';
   width: 400px;
   height: 3px;
   background-color: #fff;
}

看一下现在的效果

三、添加小圆(雪花)

1.HTML部分

<div class="cloud">
      <span style="--i:11"></span>
      <span style="--i:13"></span>
      <span style="--i:15"></span>
      <span style="--i:10"></span>
      <span style="--i:12"></span>
      <span style="--i:14"></span>
      <span style="--i:15"></span>
      <span style="--i:13"></span>
      <span style="--i:11"></span>
      <span style="--i:14"></span>
      <span style="--i:10"></span>
      <span style="--i:12"></span>
      <span style="--i:11"></span>
      <span style="--i:15"></span>
      <span style="--i:13"></span>
      <span style="--i:10"></span>
      <span style="--i:15"></span>
      <span style="--i:11"></span>
      <span style="--i:13"></span>
      <span style="--i:12"></span>
      <span style="--i:11"></span>
   </div>

2.CSS部分

/* 雪花的样式 */
.cloud span {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #fff;
   margin: 0 3px;
   animation: linear infinite animate;
   /* 转换原点改成底部 */
   transform-origin: bottom;
   animation-duration: calc(10s / var(--i));
   animation-delay: calc(-20s / var(--i));
}


@keyframes animate {
   0% {
      transform: translateY(0) scale(1);
   }

   80% {
      transform: translateY(290px) scale(1);
   }

   100% {
      transform: translateY(290px) scale(0);
   }
}

transform-origin: bottom;——将转换原点的改成底部，转换原点是转换(位移、旋转、缩放等)的时候，基于盒子的某一个点进行转换，此处将底部设置为转换原点是，为了实现雪花在动画中，80%-100%这个缩放的过程中，基于自己底部的那个点变小，实现雪花融化在地上的效果

另外，calc是CSS的一个简单计算的方法；–i为变量

最终效果图