好看的文字霓虹灯效果～

 文字的霓虹灯效果

最近看到的一篇技术博文，介绍了文字的各种炫酷效果，所以心血来潮，也跟着做一做，平时不怎么能用到，就当作消遣娱乐吧

 

html部分很简单，创建几个span标签🏷️就行，css部分，需要先引入谷歌字体库 

@import url('https://fonts.googleapis.com/css?family=Bad+Script');

 

---

 

html:

<template>
    <h1>
        <span>y</span>
        <span>a</span>
        <span>n</span>
        <span>h</span>
        <span>a</span>
        <span>i</span>
        <span>p</span>
        <span>e</span>
        <span>n</span>
        <span>g</span>
    </h1>
</template>

css:

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
    body{
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
        font-family: 'Bad Script', cursive;
    }
    h1{
        margin: 0;
        padding: 0;
        background-color: #000;
        font-size: 16em;
        span{
            font-family: 'Bad Script', cursive;
            display: inline-block;
            margin: 0;
            padding: 0;
            color: #111;
            animation: animate 2.5s linear infinite;
        }
        span:nth-child(1){
            animation-delay: 0s;
        }
        span:nth-child(2){
            animation-delay: 0.25s;
        }
        span:nth-child(3){
            animation-delay: 0.5s;
        }
        span:nth-child(4){
            animation-delay: 0.75s;
        }
        span:nth-child(5){
            animation-delay: 1s;
        }
        span:nth-child(6){
            animation-delay: 1.25s;
        }
        span:nth-child(7){
            animation-delay: 1.5s;
        }
        span:nth-child(8){
            animation-delay: 1.75s;
        }
        span:nth-child(9){
            animation-delay: 2s;
        }
        span:nth-child(10){
            animation-delay: 2.25s;
        }
    }
    @keyframes animate {
        0%,100%{
            color: #fff;
            filter: blur(2px);
            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,
             0 0 500px #00b3ff,
             0 0 600px #00b3ff;
        }
        5%,95%{
            color: #111;
            filter: blur(0px);
            text-shadow:  none;
        }
    }
</style>

接下来看一下效果吧～