[分享]css具有跑马灯效果的文字

CSS是网页设计中非常重要的一部分，通过巧妙运用CSS，可以让网页的效果更加生动，其中一种比较常见的效果就是跑马灯效果。跑马灯效果指的是在网页中某一区域内的文字可以水平滚动，给人产生跑马奔腾的感觉，非...

CSS是网页设计中非常重要的一部分，通过巧妙运用CSS，可以让网页的效果更加生动，其中一种比较常见的效果就是跑马灯效果。

跑马灯效果指的是在网页中某一区域内的文字可以水平滚动，给人产生跑马奔腾的感觉，非常适合用于展示公告、新闻滚动等需要吸引用户注意力的场景。

 <style>
   .marquee {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
      }
   .marquee p {
     animation: marquee 15s linear infinite;
     display: inline-block;
     padding-right: 100%;
      }
   @keyframes marquee {
     from { transform: translate3d(0, 0, 0); }
     to { transform: translate3d(-100%, 0, 0); }
     }
   </style>

   <div class="marquee">
   <p>这里是跑马灯效果文字，可以自行修改内容测试</p>
   </div> 

以上是一个简单的CSS跑马灯效果代码，它的原理是通过设置一个具有动画属性的p标签，在15秒内从左到右以线性方式滚动，并不断循环。其中需要注意的是，要将overflow属性设置为hidden，才能让文字在div容器内滚动，而且由于文字过长，将white-space设置为nowrap，可以使文字在一行内滚动。

总的来说，CSS的跑马灯效果是非常实用的，但也要避免过度使用，否则会影响用户的阅读体验。此外，在实际应用中还需要考虑兼容性问题，不同的浏览器可能需要不同的前缀或hack才能实现相同的效果。