css3下坠效果

CSS3是前端工程师必备的技能之一，其中一个常用的特效是下坠效果。下坠效果可以轻松的给网页增加动感，提升用户体验，下面我们看一下如何实现。

/* CSS代码 */

.Box {
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  animation: drop 2s ease-out both;
}

@keyframes drop {
  0% {
    opacity: 0;
    transform: translate(-50%,-300px) scale(0.5);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%);
  }
  100% {
    transform: translate(-50%,20px) scale(1);
  }
}

css3下坠效果

首先，我们给下坠效果设定容器，然后通过绝对定位将容器放在页面顶部。我们可以使用transform属性将容器横向移动到页面中间，例如设置left为50%，此时容器的左边缘会正好和屏幕水平中线对齐。

接下来，在CSS里新增一个动画，名为drop。这个动画在2秒的时间内从屏幕顶端向下下落，并最终停止在距离屏幕底部20px处。我们可以通过opacity属性来让容器逐渐变得可见，同时在动画的80%的时间里让容器快速下落，在过程中先缩小到原来的一半，再逐步变大，最终形成类似于弹跳的效果。

在容器上增加animation属性，值为drop，作用是将动画应用到容器上，同时设置动画的运行时长、时间曲线和动画结束后容器所在位置，both意味着动画在开始和结束时会停留在最终状态。

最后，我们只需将容器插入到页面中，就可以看到一个简单却有趣的下坠效果了。

相关推荐