css实现文本逐字颜色渐变-用于歌词颜色渐变

最新推荐文章于 2023-12-23 01:25:59 发布

B0xing

最新推荐文章于 2023-12-23 01:25:59 发布

阅读量439

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/boxing012/article/details/134012738

版权

1.先看实现的效果

音乐歌词逐字渐变

2.直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <style lang="less">
        .root{
            width: 100%;
            .word {
                background: linear-gradient(90deg, #f00 10px, #132 0px); /* 标准语法 */
                -webkit-background-clip: text; /* 背景色只影响文本*/
                -webkit-text-fill-color: transparent; /* 文本区域填充透明色*/
                font-size: 36px;
                white-space: nowrap;
                overflow:hidden;
            }
        }
    </style>
</head>
<body>
    <div class="root">
        <span class="word">
            Hello WorldHello WorldHello WorldHello World
        </span>
    </div>
    <script>
        let leftPx = 10
        let num = setInterval(() => {
            if(leftPx <= $('.word').width()){
                leftPx = leftPx + 15
                document.querySelector('.word').style.backgroundImage = `linear-gradient(90deg, #f00 ${leftPx}px, #132 0px)`
            }
        }, 100);
    </script>
</body>
</html>

3.css关键属性解释

background: linear-gradient(90deg, #f00 10px, #132 0px);

开始颜色的位置小于结束颜色的位置, 则两个颜色之间没有过度的效果. 例子中开始的位置是10px小于结束的位置0px

-webkit-background-clip: text;

设置背景颜色仅影响文字的区域

-webkit-text-fill-color: transparent;

设置文字区域的颜色为透明, 这样可以是背景颜色透过文字

B0xing

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现文本逐字颜色渐变-用于歌词颜色渐变

css实现文字颜色逐字渐变
复制链接

扫一扫

css实现文本逐字颜色渐变-用于歌词颜色渐变

1.先看实现的效果

2.直接上代码

3.css关键属性解释

“相关推荐”对你有帮助么？