CSS3发光文本动画效果

CSS3发光文本动画效果

css，声明变量的时候，变量名前面要加两根连词线（--）

var()函数用于读取变量

body {

  --foo: #7F583F;

  --bar: #F7EFD2;

}

a {

  color: var(--foo);

  text-decoration-color: var(--bar);

}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值，color: var(--foo, #7F583F);

animation: animate 3s linear infinite;

animation-delay: calc(0.1s* var(--i))

filter: blur(2px)函数给图像设置高斯模糊。

filter: hue-rotate 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。

若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

filter: blur(2px) hue-rotate(360deg);

text-shadow 属性向文本设置阴影

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，

每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

text-shadow: h-shadow v-shadow blur color

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color可选。阴影的颜色。

text-shadow: 0 0 10px #00b3ff,

                0 0 20px #00b3ff,

                0 0 40px #00b3ff,

                0 0 80px #00b3ff,

                0 0 120px #00b3ff,

                0 0 200px #00b3ff,

                0 0 300px #00b3ff,

                0 0 400px #00b3ff;

html:

    <h2>
        <span style="--i:1;">H</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">p</span>
        <span style="--i:4;">p</span>
        <span style="--i:5;">y</span>
        <span style="--i:6; margin-left: 5vw;">N</span>
        <span style="--i:7;">e</span>
        <span style="--i:8;">w</span>
        <span style="--i:9; margin-left: 5vw;">Y</span>
        <span style="--i:10;">e</span>
        <span style="--i:11;">a</span>
        <span style="--i:12;">r</span>
    </h2>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        body{
            color: #fff;
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        h2{
            display: flex;
            color: transparent;
            font-size: 10vw;
        }
        h2 span{
            animation: animate 3s linear infinite;
            animation-delay: calc(0.1s* var(--i));
        }
        @keyframes animate {
            0%{
                color: #fff;
                filter: blur(2px) hue-rotate(0deg);
                text-shadow: 0 0 10px #00b3ff,
                0 0 20px #00b3ff,
                0 0 40px #00b3ff,
                0 0 80px #00b3ff,
                0 0 120px #00b3ff,
                0 0 200px #00b3ff,
                0 0 300px #00b3ff,
                0 0 400px #00b3ff;
            }
            30%,70%{
                color: #fff;
                filter: blur(2px) hue-rotate(360deg);
                text-shadow: 0 0 10px #00b3ff,
                0 0 20px #00b3ff,
                0 0 40px #00b3ff,
                0 0 80px #00b3ff,
                0 0 120px #00b3ff,
                0 0 200px #00b3ff,
                0 0 300px #00b3ff,
                0 0 400px #00b3ff;
            }
            100%{
                color: transparent;
                box-shadow: none;
                filter: blur(2px) hue-rotate(0deg);
            }
        }
    </style>