动画-文字横屏滚动

最新推荐文章于 2023-06-25 20:51:27 发布

Bonjours

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量197

点赞数

文章标签：动画 html5 html

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/120310603

版权

这篇博客详细介绍了如何使用CSS3的`@keyframes`规则创建一个平滑的div元素水平滚动动画。通过设置`transform: translate3d()`属性在不同动画帧中的变化，实现了元素从左至右的无限循环滚动效果。这对于前端开发者来说，是一种实用的网页动态效果技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@keyframes scrowll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

div{

display: flex;
animation-duration: 30s;
animation-name: scrowll ;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;

}