CSS3练习：霓虹文字

今天终于刷完了《css3艺术》这本书，每天边敲代码边学习，从书上学到了很多知识，

虽然有些地方还不是很明白，但自己已经能做出一些样式了。

看着自己的作品，也挺自豪的。

作者还有一个网站，里面还有很多书上没有讲到的案例，可以让我乐此不疲地继续刷代码了。

强烈推荐这本书，此书给一个大大的赞。

昨天看到一篇文章说，外国一个女孩用CSS3代码画油画。太牛了。

今天给大家分享一个霓虹文字效果，太酷了，大家快去敲出来。绝对能惊到你。

<div class="neon">

    <p class="text" data-text="thanks">thanks</p>

    <div class="gradient"></div>

    <div class="spotlight"></div>

</div>

body {

    margin: 0;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: black;

}

.text {

    color: white;

    font-size: 150px;

    font-weight: bold;

    font-family: sans-serif;

    text-transform: uppercase;

    margin: 0;

    filter: brightness(2);

    background-color: black;

}

.text::before {

    content: attr(data-text);

    position: absolute;

    filter: blur(3px);

    mix-blend-mode: difference;

}

.neon {

    position: relative;

    overflow: hidden;

}

.gradient {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);

    mix-blend-mode: multiply;

}

.spotlight {

    position: absolute;

    top: -200%;

    left: -100%;

    right: -100%;

    bottom: -200%;

    background: radial-gradient(circle, white, black 25%) center/5% 5%;

    transform: rotate(45deg);

    mix-blend-mode: color-dodge;

    /*ie不支持*/

    animation: light 10s linear infinite;

}

@keyframes light {

    to {

        transform: translate(25%, 25%);

    }

}