美化教程｜文字彩色特效代码-殇恋社区

这个文字彩色特效代码挺好看的，适合做信封、句子啥滴！文字彩色特效代码采用的是HTML+CSS+JS。现在分享给大家吧！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明背景逐字变色</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style type="text/css">
        /* 让文字浮在背景之上 */
        .text_body {
            margin: 100px auto;
            background: transparent;   /* 背景透明 */
        }
        .text {
            position: relative;
            margin: 100px auto;
            padding: 1em;             /* 内边距让文字不贴边，但背景透明，不会遮挡 */
            background: transparent;   /* 关键：无任何背景色或渐变 */
            border: none;             /* 无边框 */
            color: inherit;           /* 继承外部文字颜色，动画中每个字会独立变色 */
            font-family: system-ui, 'Segoe UI', '微软雅黑', sans-serif;
            line-height: 1.6;
            font-size: 1.1rem;
        }
        /* 保证每个字符的动画流畅 */
        #container span {
            display: inline-block;
        }
        /* 可选：让容器不产生任何额外背景块，完全透明 */
        .text_body,
        .text,
        #container {
            background: transparent;
        }
    </style>
</head>
<body>
<!-- 文字容器：背景全透明，只做逐字变色 -->
<div class="text_body">
    <div class="text" id="container">
        初恋是让人难忘，觉得美好。为什么？不是因为他/她很漂亮或很帅，也不是因为得不到就是好的，而是因为人初涉爱河时心理异常纯真，绝无私心杂念，只知道倾己所有去爱对方，而以后的爱情就没有这么纯洁无暇了。纯真是人世间最可贵的东西，我们可求的就是它。
    </div>
</div>

<script type="text/javascript">
    // 完全保留原始的逐字随机变色逻辑
    var text = $("#container").text().trim();
    $("#container").html("");
    for(var i = 0; i < text.length; i++){
        $("#container").append("<span>" + text[i] + "<\/span>");
    }
    var s = 0;
    var tim = setInterval(function(){
        $("#container span").eq(s++).css("color", getColor());
        if(s == text.length){
            clearInterval(tim);
        }
    }, 100);
    function getColor(){
        return "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
    }
</script>
</body>
</html>

效果：

透明背景逐字变色

初恋是让人难忘，觉得美好。为什么？不是因为他/她很漂亮或很帅，也不是因为得不到就是好的，而是因为人初涉爱河时心理异常纯真，绝无私心杂念，只知道倾己所有去爱对方，而以后的爱情就没有这么纯洁无暇了。纯真是人世间最可贵的东西，我们可求的就是它。

分享是一种美德！

THE END