主页

使用 CSS 动画和 transform: translateY() 属性,实现内容垂直移动

2023-09-19 05:34PM

要想实现内容可以自动向上移动,可以使用 CSS 动画和定位属性来实现

eg:

<div class="container">
  <p>你好你好你好</p>
</div>
<style>
.container {
  position: relative;
  height: 200px; /* 调整适合您的容器高度 */
  margin-top: 300px;
  overflow: hidden;
}

.container p {
  position: absolute;
  animation: move-up 10s linear infinite;
}

@keyframes move-up {
   0% {
     transform: translateY(0);
   }
  100% {
     transform: translateY(-100%);
   }
}
</style>

在浏览器刷新就可以看到下面的内容:

 

 

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论