纯css实现流光字体动画-掘金JUEJIN

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

前言

今天我们用css实现跳动的荧光字体动画效果。通过本案例可以学习了解到如下知识点：

• text-shadow的应用
• css选择器以及延时动画的使用

代码块：

话不多说先看效果

静态部分

首先设置一个黑色背景底色，字体采用白色加蓝色荧光。
我们使用text-shadow为文字添加阴影 如下：

<div>xitu</div>

//css
body{
  background-color: #333;
}
div{
  font-size: 38px;
  text-shadow: 0 0 5px #fff,
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 18px #126fcc,
                0 0 20px #126fcc,
                0 0 40px #126fcc;
            color: #fff;
}

Note：这里有一点就是text-shadow可以使用多重阴影。

添加动画

我们先添加一个闪烁动画字体效果。
设置动画1s重复交替动画关键帧start，采用ease-in-out方式。
animation: start 1s ease-in-out infinite alternate;

<div>XITU-JUEJIN</div>
//css
body{
  background-color: #333;
}
div{
  animation-delay: 0s;
        color: #444;
        text-shadow: 0 0 0 #444;
        animation: start 1s ease-in-out infinite alternate;
        font-size: 38px;
}
 @keyframes start {
        to {
            text-shadow: 0 0 5px #fff,
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 18px #126fcc,
                0 0 20px #126fcc,
                0 0 40px #126fcc;
            color: #fff;
        }
    }

升级

标题我们提到是流光效果并不是单纯的闪烁，也就是发光体从左到右流过去嘛，流星大家见过哈。
怎么实现呢？思路：添加字体不同的闪烁时间，从左到右从而实现流动效果。

• 一、这里我们通过animation-delay添加延迟闪烁效果。
• 二、然后通过css-nth-child选择器设置不同字母的闪烁时间。 话不多说、好了上代码：

 <div class="text">
        <!-- xitu -->
        <span>X</span>
        <span>I</span>
        <span>T</span>
        <span>U</span>
        <span>-</span>
        <!-- juejn -->
        <span>J</span>
        <span>U</span>
        <span>E</span>
        <span>J</span>
        <span>I</span>
        <span>N</span>
    </div>
    
    //css
     body {
        background-color: #333;
    }

    .text {
        padding: 88px;
    }

    .text span {
        animation-delay: 0s;
        color: #444;
        text-shadow: 0 0 0 #444;
        animation: start 1s ease-in-out infinite alternate;
        font-size: 38px;

    }

    @keyframes start {
        to {
            text-shadow: 0 0 5px #fff,
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 18px #126fcc,
                0 0 20px #126fcc,
                0 0 40px #126fcc;
            color: #fff;
        }
    }

    .text span:nth-child(1) {
        animation-delay: 0.1s;
    }

    .text span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .text span:nth-child(3) {
        animation-delay: 0.3s;
    }

    .text span:nth-child(4) {
        animation-delay: 0.4s;
    }

    .text span:nth-child(5) {
        animation-delay: 0.5s;
    }

    .text span:nth-child(6) {
        animation-delay: 0.6s;
    }

    .text span:nth-child(7) {
        animation-delay: 0.7s;
    }

    .text span:nth-child(8) {
        animation-delay: 0.8s;
    }

    .text span:nth-child(9) {
        animation-delay: 0.9s;
    }

    .text span:nth-child(10) {
        animation-delay: 1s;
    }

    .text span:nth-child(11) {
        animation-delay: 1.1s;
    }

    .text span:nth-child(12) {
        animation-delay: 1.2s;
    }

我们这边设置了12个字体的不同显示时间从而达到了想要的效果。
ps：animation: start 1s ease-in-out infinite alternate;
执行start动画帧，1秒内重复交替执行加速然后减速的过渡效果

结束

大功告成！看看最后的效果，用这玩意设为背景或者开机动画别有一番风味哈。