朋友最近接了个小项目，要结尾款了，客户突然来了个要让标题闪闪发光的需求。朋友让帮忙，做好了请吃鸡腿。看在这客户这么重视界面效果的份上我决定试试，这里简单记录一下。给出以下3种效果。

一、自发光

比较容易实现，用文字阴影模拟发光产生的光晕效果，用动画改变它们的亮度即可。

css 复制代码

.lighting-el { 
    animation: lighting 2s linear infinite; 
    color: rgb(210, 210, 210);
}
@keyframes lighting { 
    0%,100% { 
        color: rgb(210, 210, 210); 
        text-shadow: 0 0 5px rgb(210, 210, 210); 
    } 
    40% { 
        color: rgb(255, 255, 255); 
        text-shadow: 0 0 15px rgb(255, 255, 255); 
    } 
}

二、文字流光

用一个渐变色在背景上反复移动，模拟流光的效果。也可以作为加载动画使用。svg实现如下：

html 复制代码

<defs> 
    <!--线性渐变，0% ,100% 时设置透明度为0--> 
    <linearGradient id="line-gradient" x1="0%" y1="40%" x2="100%" y2="60%"> 
        <stop offset="0%" stop-color="#A9A7A7" stop-opacity="0" /> 
        <stop offset="50%" stop-color="#A9A7A7" stop-opacity="0.8" />
        <stop offset="100%" stop-color="#A9A7A7" stop-opacity="0" /> 
    </linearGradient> 
    <!--流光背景动画。用pattern定义一个背景，width和height指定的是图像范围，而不是整体进行缩放-->
    <pattern id="light-bg" width="100%" height="100%"> 
    <!--宽、高要能覆盖文字--> 
        <rect x="0" y="0" width="200" height="100" fill="#fff"></rect>
        <rect transform="skewX(-20)" x="0" y="0" width="50" height="120" fill="url(#line-gradient)"> <!--指定x属性，一直重复向右移动即可--> 
        <animate attributeName="x" from="-20" to="240" begin="0s" dur="2s" repeatCount="indefinite" /> </rect> 
    </pattern> 
</defs> 
<g transform="translate(0,60)">
<!--fill属性应用 pattern定义的背景动画--> 
<text fill="url(#light-bg)" x="0" y="50" style="font-size: 30px;font-weight: 700;font-family: 'KaiTi';">文字流光</text> 
</g>

三、闪闪发光

类似不连续的光泽物覆盖物体，表面常伴随有光点闪烁的效果。用svg模拟实现如下：

（1）用定义一个闪光用的星星，用高斯模糊柔和一下边缘。

（2）使用柏林噪声和位置替换滤镜对我们准备好的条纹背景制作一个不连续的光泽表面纹理。

（3）用元素引用定义好的星星，用动画改变透明度模仿闪烁效果即可。

html 复制代码

<defs> 
    <!--高斯模糊-->
    <filter id="gs-filter"> 
        <feGaussianBlur in="sourceGraphic" stdDeviation="1" /> 
    </filter> 
    <filter id="noise-filter"> 
        <feTurbulence type="turbulence" baseFrequency="0.81" numOctaves="2" stitchTiles="no-Stitch" /> <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="30" /> 
    </filter> 
    <!--星星，加一点模糊柔和一下边缘--> 
    <symbol id="star-symbol" fill="#fff" filter="url(#gs-filter)"> 
        <path d="M0 25L23 23L25 0L27 23L50 25L27 27L25 50L23 27Z" /> 
        <path d="M0 25L23 23L25 0L27 23L50 25L27 27L25 50L23 27Z" transform="rotate(45),scale(0.5)" transform-origin="25 25" /> 
    </symbol> 
    <!--不连续的光泽背景 边缘部分在经过滤镜后光泽分布不均匀-->
    <!--所以调整x从4%开始（也可以用viewbox+preserveAspectRatio属性控制用中间部分显示） --> 
    <pattern id="light-bg2" width="100%" height="100%" x="4%"> 
        <g filter="url(#noise-filter)"> 
            <rect x="0" y="0" width="500" height="95" fill="#619af5"></rect> 
            <rect x="0" y="0" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="15" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="30" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="45" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="60" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="75" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
            <rect x="0" y="85" width="500" height="10" fill="#fff" stroke-width="4" stroke="#6c6a6a"></rect> 
        </g> 
    </pattern> 
</defs> 
<g transform="translate(50,260)"> 
    <text fill="url(#light-bg2)" x="0" y="30" style="font-size: 50px;font-weight: 700;font-family: 'Fantasy';">闪闪发光</text> 
    <use opacity="1" xlink:href="#star-symbol" transform-origin="25 25" transform="matrix(0.8,0,0,0.8,20,0)"> 
        <!--用values属性来控制星星的闪烁频率--> 
        <animate attributeName="opacity" values="1;0;1;1;1;1;1;1;1;0" begin="0s" dur="2s" repeatCount="indefinite" /> </use> 
    <use opacity="1" xlink:href="#star-symbol" transform-origin="25 25" transform="translate(66,-28),scale(0.6),rotate(20)"> 
        <animate attributeName="opacity" values="1;0;1;1;1;1;1;1;1;1;1" begin="1s" dur="2s" repeatCount="indefinite" /> </use> 
    <use opacity="0" xlink:href="#star-symbol" transform-origin="25 25" transform="matrix(0.5,0,0,0.5,170,10)"> 
        <animate attributeName="opacity" values="0;1;1;0;0;0;0;0;0" begin="1.5s" dur="2s" repeatCount="indefinite" /> 
    </use> 
</g>

让朋友选一种，然后调整下文字，位置就差不多了。不得不说鸡腿味道还可以。

快元旦了，先祝大家元旦快乐吧。

一个闪闪发光的标题

一、自发光

二、文字流光

三、闪闪发光