[分享]css3掉落消失动画

CSS3掉落消失动画可以让网页变得更加生动有趣，接下来我们来看一下如何实现这一效果。/ CSS3掉落消失动画 / / 定义动画关键帧 / keyframes drop { 0 { transform...

CSS3掉落消失动画可以让网页变得更加生动有趣，接下来我们来看一下如何实现这一效果。

/*
 * CSS3掉落消失动画
 */

/* 定义动画关键帧 */
@keyframes drop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* 定义目标元素样式 */
.box {
  position: relative;
  animation: drop 1s ease forwards;
}

/* 定义消失动画 */
@keyframes dissolve {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 定义消失触发器 */
.box:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  animation: dissolve 1s ease forwards;
} 

代码中我们使用了关键帧来定义掉落动画和消失动画，在目标元素中设置了掉落动画，同时也定义了消失触发器，当鼠标悬停在目标元素上时触发消失动画，让元素逐渐消失。具体实现可根据实际需要进行调整。