[分享]css3文字轮播

发布于 2024-11-11 15:55:33

CSS3文字轮播是一种常见的网页功能，可以通过CSS3实现循环展示不同的文字内容，给网页增加活力和动感。下面我们来介绍一下如何实现CSS3文字轮播。 .text{ animation: slide 5...

CSS3文字轮播是一种常见的网页功能，可以通过CSS3实现循环展示不同的文字内容，给网页增加活力和动感。下面我们来介绍一下如何实现CSS3文字轮播。

<html>
  <head>
    <style>
      .text{
        animation: slide 5s infinite;
        /*动画时间为5秒，无限循环*/
      }
      @keyframes slide{
        0%{transform: translateY(0);}
        10%{transform: translateY(-100%);}
        /*0%-10%向上移动100%*/
        20%{opacity: 1;}
        30%{opacity: 0;}
        /*20%-30%透明度由1变为0*/
        40%{transform: translateY(100%);}
        /*40%-50%向下移动100%*/
        100%{transform: translateY(0);}
        /*100%回到原位*/
      }
    </style>
  </head>
  <body>
    <div class="text">
      <p>这是第一段文字</p>
      <p>这是第二段文字</p>
      <p>这是第三段文字</p>
    </div>
  </body>
</html>

在上面的代码中，我们定义了一个名为text的div元素，里面包含了三个p元素，分别是需要轮播的文字内容。在CSS样式表中，我们定义了一个名为slide动画，使用了transform、opacity等属性实现了上下滑动和淡入淡出的效果。然后将slide动画应用到.text类的元素上，并指定了动画时间和循环次数。

以上就是关于CSS3文字轮播的实现方法。这种轮播效果可以用于网页中的广告、内容展示等场景，使网页更加生动有趣。

css 教程