css文字渐变滚动

最新推荐文章于 2024-01-05 11:34:58 发布

abocidefoge

最新推荐文章于 2024-01-05 11:34:58 发布

阅读量261

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/abocidefoge/article/details/126043707

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>测试</title>
    </head>
    <style>
        .box {
            width: 300px;
            height: 100px;
            overflow: hidden;
            position: relative;
        }
        .content {
            width: 300px;
            position: relative;
            top: 0;
        }
        .animation {
            transition: all 1s;
        }
        @keyframes scroll {
            0% {
                top: 0;
            }
            100% {
                top: -356px;
            }
        }
        .box-header {
            position: absolute;
            top: 0;
            background-image: linear-gradient(#fff, rgba(0, 0, 0, 0));
            width: 100%;
            height: 60px;
            z-index: 99;
        }
        .box-bottom {
            position: absolute;
            background-image: linear-gradient(rgba(0, 0, 0, 0), #fff);
            width: 100%;
            height: 60px;
            bottom: 0;
            z-index: 99;
        }

        .text {
            margin-bottom: 10px;
        }
    </style>
    <body>
        <div class="box" onmouseover="mouseover(this)" onmouseout="mouseout(this)">
            <div class="box-header"></div>
            <div class="content">
                <div class="text"></div>
            </div>
            <div class="box-bottom"></div>
        </div>
    </body>
    <script src="./app2.js"></script>
    <script>
        let dom = document.querySelector('.content');
        let text = document.querySelector('.text');
        let word = `党的十八大以来，美丽中国建设迈出重大步伐，我国生态环境保护发生历史性、转折性、全局性变化，美丽中国正在不断变为现实。今天，言之有理带您数读美丽中国建设，走进数字中的绿水青山。`;
        text.innerHTML = word;

        // 插入相同的
        var div = document.createElement('div');
        div.innerHTML = word;
        dom.appendChild(div);

        let maxTop = 0 - text.offsetHeight - 10; //10为修正偏差
        let top1 = 0;
        let timer;
        function scroll() {
            timer = setInterval(() => {
                if (top1 > maxTop) {
                    top1--;
                } else {
                    top1 = 0;
                }
                dom.style.top = top1 + 'px';
            }, 30);
        }
        scroll();

        function mouseover(e) {
            clearInterval(timer);
        }

        function mouseout(e) {
            scroll();
        }
    </script>
</html>