CSS实现无缝滚动+渐隐渐现效果

效果 一

存在问题 平滑滚动 不会做短暂的停留

直接上代码

import React, { useState, useEffect } from 'react';
import "./index.css"

function App() {
  const ary = [
      "1- 关关雎鸠，在河之洲。",
      "2- 窈窕淑女，君子好逑。",
      "3- 参差荇菜，左右流之。",
      "4- 窈窕淑女，寤寐求之。",
      "5- 求之不得，寤寐思服。",
      "6- 悠哉悠哉，辗转反侧。",
      "7- 参差荇菜，左右采之。",
      "8- 窈窕淑女，琴瑟友之。",
      "9- 参差荇菜，左右芼之。",
      "10- 窈窕淑女，钟鼓乐之。",
      "1-  关关雎鸠，在河之洲。"
  ]
  return (
     <div className="App">
        <div className="list">
            <div className="shadow" />
              <ul
                className="target"
                style={{ animation: `${ary.length}s rowup linear infinite normal`}}
              >
                {ary.map((i, t) => {
                    return (
                        <li className="item" key={t}>{i}</li>
                    )
                })}
            </ul>
        </div>
    </div>
  );
}

export default App;

@keyframes rowup {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-100% + 24px));
    }
}

.list{
    width: 500px;
    /*border: 1px solid #999;*/
    margin: 20px auto;
    position: relative;
    height: 50px;
    overflow: hidden;
}

.item {
    height: 24px;
}

.list .target{
    padding-left: 16px;
    animation: 16s rowup linear infinite normal;
    position: relative;
}

.list :hover {
    cursor: pointer;
}

.list:hover .target {
    animation-play-state: paused;
    cursor: pointer;
}

.shadow {
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 20px 12px #FFFFFF inset;
    z-index: 50;
    position: absolute;
}

效果 二

存在问题 浏览器tab切换到别的页面呆一会 回来会快速滚动一会后再恢复正常

  var scrollnews = document.getElementById('scrollnews');
    var lis = scrollnews.getElementsByTagName('li');
    var ml = 0;
    var timer1
    var scrollFunc = function() {
        timer1 = setInterval(function(){
            var liHeight = lis[0].offsetHeight;
            var timer2 = setInterval(function(){
                scrollnews.scrollTop = (++ml);
                if (ml === 2) {
                    lis[0].classList.add("active")
                }
                if(ml === liHeight){
                    scrollnews.scrollTop = 0;
                    ml = 0;
                    lis[0].classList.remove("active")
                    lis[0].parentNode.appendChild(lis[0]); // 节点替换第一个移到最后一个
                    clearInterval(timer2);
                }
            },17);
        },1500); // 停留间隔控制时间
    }

    var clear = function () {
        console.log("clear");
        clearInterval(timer1); // 清除定时器  暂停动画
    }
    scrollFunc();

    // 不用悬停可注释下面方法
    scrollnews.addEventListener("mouseenter", clear)
    scrollnews.addEventListener("mouseleave", scrollFunc)

#scrollnews {
            height: 48px;
            line-height: 48px;
            width: 200px;
            overflow:hidden;
        }

        li {
            background: linear-gradient(#1FA2FF, #12D8FA, #A6FFCB);
            height: 48px;
            line-height: 48px;
            list-style: none;
            opacity: 1;
            transition: 1s all linear;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        .active {
            opacity: 0;
        }

<ul id="scrollnews">
    <li><a href=" " title=" " target="_blank"> 1.阿斯蒂芬</a></li>
    <li><a href=" " title=" " target="_blank"> 2.爱喝酒叫对方过后</a></li>
    <li><a href=" " title=" " target="_blank"> 3.带回家对方过后</a></li>
    <li><a href=" " title=" " target="_blank"> 4.水电费公司的</a></li>
    <li><a href=" " title=" " target="_blank"> 5.苦需要城村奇才在地d</a></li>
</ul>

效果 三

好像没什么问题 左右下的原理和上一样

    var warp = document.getElementById('warp')
    var box1 = document.getElementById('box1')
    var box2 = document.getElementById('box2')
    var target = box1.getElementsByTagName('li')[0]
    var timeInter = 1000 // 停顿间隔时间

    var timer1 = null,timer2=null
    box2.innerHTML = box1.innerHTML // 复制盒子

    max = box1.clientHeight // 单个盒子高度
    targetMax = target.clientHeight // 子项的高度


    const scrollUp = () => {
        clearInterval(timer1)
        timer1 = setInterval(() => {
            warp.scrollTop++
            if (warp.scrollTop >= max) {
                warp.scrollTop = 0
            }

            if(warp.scrollTop % targetMax === 0){
                // 上移高度是子项高度的倍数时
                // 暂停
                clearInterval(timer1)
                clearTimeout(timer2)

                timer2 = setTimeout(() => {
                    // 停顿时间
                    // 重新开始
                    timer1 = setInterval(scrollUp,17) // 17比较平滑
                },timeInter)
            }
        },17)
    }

    setTimeout(() => {
        // 初次进入时画面效果  否则第一个看不到
        scrollUp()
    }, timeInter)

    warp.onmouseenter = () => {
        clearInterval(timer1)
        clearTimeout(timer2)
    }
    warp.onmouseleave = () => {
        clearInterval(timer1)
        clearTimeout(timer2)
        setTimeout(() => {
            scrollUp()
        }, timeInter)
    }

        #warp{
            width: 200px;
            height: 32px;
            overflow: hidden;
            margin:100px auto 0;
        }
        #warp a{
            text-decoration: none;
            color: #12D8FA;
        }
        #warp #con{
            width: 200px;
            height: 192px;
            /*盒子高度需要大于等于一个容器的高度多加一条数据的高度的和*/
            overflow: hidden;
        }
        #warp #con #box1{
            overflow: hidden;
        }
        #warp #con #box2{
            overflow: hidden;
        }
        #warp li{
            margin-right: 10px;
            width: 200px;
            height: 32px;
            list-style: none;
        }

<div id="warp">
    <div id="con">
        <div id="box1">
            <li><a href=" " title=" " target="_blank"> 1.阿斯蒂芬</a></li>
            <li><a href=" " title=" " target="_blank"> 2.爱喝酒叫对方过后</a></li>
            <li><a href=" " title=" " target="_blank"> 3.带回家对方过后</a></li>
            <li><a href=" " title=" " target="_blank"> 4.水电费公司的</a></li>
            <li><a href=" " title=" " target="_blank"> 5.苦需要城村奇才在地d</a></li>
        </div>
        <div id="box2"></div>
    </div>
</div>