CSS实现块级元素从下往上滑动效果

要实现块级元素从下往上滑动的效果，可以使用CSS的关键帧动画。以下是一个简单的例子：

HTML:




<div class="sliding-box"></div>

CSS:




.sliding-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  animation: slide-down 2s infinite alternate;
}
 
@keyframes slide-down {
  from {
    top: 0;
  }
  to {
    top: 100px;
  }
}

在这个例子中，.sliding-box 是要滑动的块级元素。CSS动画 slide-down 定义了元素从原始位置向下移动100像素的动画。animation 属性设置了动画名称 slide-down，动画周期 2s 和动画行为 infinite alternate，后者意味着动画无限次数循环，并且交替反向播放。

CSS实现块级元素从下往上滑动效果

评论已关闭

推荐阅读