多行文字跑马灯效果

子籽籽

于 2023-04-29 15:49:50 发布

阅读量180

点赞数

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/qq_42786138/article/details/130441228

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

	 <style>
	     .item {
	       width: 500px;
	       height: 30px;
	       display: flex;
	       background-color: #ccc;
	       overflow: hidden;
	       position: relative;
	       margin-bottom: 10px;
	     }
	     .text {
	       width: auto;
	     }
	     p {
	       width: auto;
	       padding: 0;
	       margin: 0;
	       height: 30px;
	       line-height: 30px;
	       white-space: nowrap;
	       display: flex;
	     }
	     p:hover {
	       animation-play-state: paused;
	     }
	     @keyframes move {
	       0% {
	         transform: translateX(0);
	       }
	       100% {
	         transform: translateX(-50%);
	       }
	     }
	     span {
	         padding-right: 100px;
	     }
	   </style>



</head>
<body>
<ul id="app">
    <li class="item">
      <p>
        <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
        <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
      </p>
    </li>
    <li class="item">
      <p>
        <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
        <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
      </p>
    </li>
   <li class="item">
     <p>
       <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
       <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
     </p>
   </li>
   <li class="item">
     <p>
       <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
       <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
     </p>
   </li>
   <li class="item">
     <p>
       <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
       <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果，看看效果，看看效果---------</span>
     </p>
   </li>
   <li class="item">
     <p>
       <span class="text">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
       <span class="temp">----这是一段测试文本跑马灯效果的文本，看看效果-------------这是一段测试文本跑马灯效果的文本，看看效果---------</span>
     </p>
   </li>
  </ul>
<script>
      // 1s 20px
      const item = document.querySelectorAll('#app .item')[0]
      const itemW = item.clientWidth
      const text = document.querySelectorAll('.text')
      const ps = document.querySelectorAll('p')
      text.forEach((t, i) => {
          const tw = t.clientWidth
          if (tw > itemW) {
            const sec = (tw - itemW) / 20
            ps[i].style.animation = `move linear ${sec}s infinite`
          }
      })
  </script>


    
</body>
</html>