纯CSS实现文字无缝滚动（前端）

最新推荐文章于 2024-07-16 14:17:50 发布

PT、小小马

最新推荐文章于 2024-07-16 14:17:50 发布

阅读量2k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_44862918/article/details/106819297

版权

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
       * {
           margin: 0px;
           padding: 0px;
       }
   /*   body {
           animation: roll 2s infinite;
       }*/
       .cont-boss {
           /*width: 500px;*/
           height: 200px;
           /*border: 2px solid black;*/
           /*background: pink;*/
           text-align: center;
           margin: 100px auto;
           overflow: hidden;
           /*animation: roll 2s infinite;*/
           /*margin: 20px;*/
           padding: 20px;

       }
       .cont {
           animation: roll 8s linear infinite;
       }
   /*   .cont_h,.cont-p {
           animation: roll 2s infinite;
       }*/
       .cont_h {
           background: purple;
           height: 35px;
           font-size: 30px;
           border: 2px solid black;
           text-align: center;
           line-height: 35px;
       }
       .cont-p {
           background: deeppink;
           height: 30px;
           font-size: 10px;
           text-align: center;
           line-height: 30px;
           border: 1px solid black;
       }
       .cont-p:nth-child(2n) {
           background: white;
       }
       @Keyframes roll {
           0% {
               transform: translateY(0%);
           }
           to {
               transform: translateY(-100%);
           }
       }
   </style>
</head>
<body>
   <div class="cont-boss">
   <div class="cont">
       <h1 class="cont_h">kdldlfjlfdjk</h1>
       <p class="cont-p">djk1</p>
       <p class="cont-p">dfsf2</p>
       <p class="cont-p">3fdffd3</p>
       <p class="cont-p">ddfdsf</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
   </div>
   <div class="cont">
       <h1 class="cont_h">kdldlfjlfdjk</h1>
       <p class="cont-p">djk1</p>
       <p class="cont-p">dfsf2</p>
       <p class="cont-p">3fdffd3</p>
       <p class="cont-p">ddfdsf</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
       <p class="cont-p">flkfjfs</p>
   </div>
</div>

</body>
</html>

PT、小小马

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现文字无缝滚动（前端）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } /* body { animati...
复制链接

扫一扫