CSS----实现水滴效果动画，适应屏幕大小

CSS----水滴效果动画

1、实现水滴效果

   <div class="ball-page-box">
      <div class="box-item item1">1</div>
      <div class="box-item item2">2</div>
      <div class="box-item item3">3</div>
      <div class="box-item item4">4</div>
    </div>

/* 适应屏幕大小 */
.ball-page-box {
  width: 50vw;
  height: 50vh;
  box-sizing: border-box;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.box-item {
  width: 6vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  //border-radius斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
  border-radius: 60% 40% 56% 42% / 47% 68% 34% 54%;
  box-shadow: inset 0.5vw 0.5vw 0.8vw rgba(253, 253, 253, 0.2),
    0.8vw 1.1vw 1.6vw rgba(17, 43, 89, 0.4), 0.8vw 1.1vw 2.8vw rgba(17, 43, 89, 0.4),
    inset -0.8vw -0.8vw 1.2vw rgba(253, 253, 253, 0.8);
  color: #fff;
  cursor: pointer;
}

2、添加水滴动画

/* 定义关键帧 */
@keyframes dropAndRise {
  0% {
    /* 起始状态 */
    transform: translateY(0vh);
  }
  50% {
    /* 达到最低点时的状态 */
    transform: translateY(25vh);
  }
  100% {
    /* 结束状态 */
    transform: translateY(0vh);
  }
}

/* 应用关键帧到目标元素 */
/* 设置动画名称、持续时间、速度曲线和重复次数 */
.item1 {
  animation: dropAndRise 4s ease-in-out infinite;
}
.item2 {
  animation: dropAndRise 5s ease-in-out infinite; 
}
.item3 {
  animation: dropAndRise 6s ease-in-out infinite; 
}
.item4 {
  animation: dropAndRise 7s ease-in-out infinite; 
}

3、鼠标移入停止动画效果

.box-item:hover {
  animation-play-state: paused;
}

4、效果图