文字特效 - 循环渐变发光，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11

            
            svg(width='0' height='0')
    filter#f(x='-50%' y='-200%' width='200%' height='500%')
        //- create blurred copy
        feGaussianBlur(stdDeviation='35')
        //- bump up saturation of blurred copy
        feColorMatrix(type='saturate' values='1.3')
        //- slap original on top of blurred & saturated copy
        feComposite(in='SourceGraphic')

//- no text duplication in the markup
h1 gradient text glow

编辑器加载中

</body>

SCSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

            
            @property --k {
    syntax: '<number>';
    initial-value: 0;
    inherits: false
}

html, body { display: grid }

html { height: 100% }

body { background: #000 }

svg[height='0'] { position: absolute }

h1 { /* no pseudo needed */
    --k: 0;
    place-self: center;
    background: 
        linear-gradient(90deg, 
                hsl(calc(var(--k)*1turn), 95%, 65%), 
                hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
    -webkit-background-clip: text;
    color: transparent;
    font: 900 clamp(.875em, 7.25vw, 5em) arial black, sans-serif;
    filter: url(#f);
    text-align: center;
    text-transform: uppercase;
    /* needs support for animating custom properties */
    /* Firefox not quite there yet, but it's coming */
    animation: k 4s linear infinite
}

@keyframes k { to { --k: 1 } }

编辑器加载中

格式化

编辑器加载中