css3中filter hue-rotate()制作炫酷的文字效果

css3中filter hue-rotate()制作炫酷的文字效果

html：

    <div>
        <h2>h</h2>
        <h2>e</h2>
        <h2>l</h2>
        <h2>l</h2>
        <h2>o</h2>
        <br>
        <h2>w</h2>
        <h2>o</h2>
        <h2>r</h2>
        <h2>l</h2>
        <h2>d</h2>
    </div>

css:

    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body{
            /* 使用flex布局让div盒子上下左右居中对齐显示 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
        }
        h2{
            color: #fff;
            /* 将块元素转为行内块元素 */
            display: inline-block;
            font-size: 7rem;
            /* 字体间距 */
            letter-spacing: 1rem;
            cursor: pointer;
            /* 文字内容转大写 */
            text-transform: uppercase;
            line-height: 1rem;
            text-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 30px rgb(245,10,245),
            0 0 40px rgb(245,10,245),
            0 0 60px purple,
            0 0 70px purple;
            /* 过渡 */
            transition: transform 0.8s;
        }
        h2:hover{
            /* 缩放 */
            transform: scale(0.3);
        }
        /* 给每个文字设置不同时长的动画 */
        h2:first-of-type{animation: light 4s linear infinite;}
        h2:nth-of-type(2){animation: light 3s linear infinite;}
        h2:nth-of-type(3){animation: light 2.8s linear infinite;}
        h2:nth-of-type(4){animation: light 3.6s linear infinite;}
        h2:nth-of-type(5){animation: light 4.4s linear infinite;}
        h2:nth-of-type(6){animation: light 2s linear infinite;}
        h2:nth-of-type(7){animation: light 3.3s linear infinite;}
        h2:nth-of-type(8){animation: light 1.4s linear infinite;}
        h2:nth-of-type(9){animation: light 4s linear infinite;}
        h2:last-of-type{animation: light 5s linear infinite;}
        @keyframes light {
            100%{
                /* 色调旋转 */
                filter:hue-rotate(360deg)
            }
        }
    </style>