CSS 文字跑马灯效果

最新推荐文章于 2024-09-03 20:40:28 发布

Sunshine0508

最新推荐文章于 2024-09-03 20:40:28 发布

阅读量606

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/Sunshine0508/article/details/111478795

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div class="footer">

<span>这是一段文字</span>

</div>


<style lang="less">
@keyframes notice-data-v-5140b967 {
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.footer {
  width: 100%; 
  line-height: 50px;
  overflow: hidden; 
  span {
    display: inline-block;
    animation-play-state: running;
    animation-delay: -8.81969s;
    animation-duration: 18.7781s;
    animation: notice-data-v-5140b967 10s 0s linear infinite both;
  }
}

</style>