背景及文字渐变色闪烁动画

最新推荐文章于 2024-07-07 21:55:16 发布

天涯折枝人

最新推荐文章于 2024-07-07 21:55:16 发布

阅读量1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u012842525/article/details/51328826

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文字的立体效果由文字阴影叠加实现。

背景及文字颜色由数值累加再转换为16进制数形成。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>changeColor</title>
    <style type="text/css">

        #word {
            text-align: center;
            margin-top:15%; 
            font-size: 120px;font-family: STCaiyun;
            text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
            
        }
    </style>
</head>
<body>
    <p id="word">Quiet your fear</p>

    <script type="text/javascript">

        var fade = function () {
            var level = 1;
            var bg = document.body;
            var ele = document.getElementById('word')
            var flag = true;

            var change = function () {
                if (level <= 15 && level >= 0) {
                    console.log(level);
                    var color = level.toString(16);// <span style="color:#009900;">转换为16进制</span>
                    // <span style="color:#009900;">#999900~#9999FF</span>
                    bg.style.backgroundColor = '#9999' + color + color; 
                    ele.style.color = '#7733' + color + color;
                    if (flag) {level += 1;} else {level -= 1;}

                    if (level >= 15) {flag = false;}
                    if (level <= 0) {flag = true;}
                    
                    setTimeout(change, 100);
                }
            };
            change();
        }
        fade();
    </script>
        
</body>
</html>

运行效果：