css3 动画,水滴 滴落的效果

实现代码:

              <div class="drop"></div>

.drop {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid black;
  animation: drop 2s infinite;
}
 
@keyframes drop {
  0% {
    opacity: 1;
    transform: translateY(-10px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}

猜你喜欢

转载自blog.csdn.net/qq_42080594/article/details/140849780