CSS创造-2 闪烁霓虹灯

相关文章推荐

严肃的闹钟 · 杨三可代表：竞逐“双赛道”推动高质量发展· 2 月前 ·

斯文的佛珠 · 小狗吸尘器：靠碰瓷，成不了中国“戴森”！_用户· 1 年前 ·

玩篮球的四季豆 · 刺客信条：王朝（漫画） - 知乎· 1 年前 ·

奋斗的豆腐 · 在温州二十一中就读是一番怎么样的体验？ - 知乎· 1 年前 ·

文雅的煎饼果子 · 135纪录片分享 - 知乎· 1 年前 ·

利用text-shadow和box-shadow进行制作

利用padding将文字和边框隔远

利用@keyframesc插帧对text-shadow，box-shadow进行光源的关闭，到达闪烁的效果

关键点：要text-shadow,box-shadow（内外都可以发光）的特性进行多层叠加，以达到真实光源的效果（近强远弱），字体白色

注意点：真实的霓虹灯灯带都是带着淡淡的白色

<style>
    :root {
    /* Set neon color */
    --neon-text-color: #E684AE;
    --neon-border-color: rgb(108, 45, 192);
    @font-face{
    font-family: AnoStencil;
    src: url("./fonts/AnoStencil-Light.otf");
    body {
    font-family: 'AnoStencil', sans-serif;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;  
    background: #000;
    min-height: 300px;
        font-size: 13rem;
        border: 5px solid #fff;
        padding: 50px;
        border-radius: 10px;
        text-transform: uppercase;
        color: #fff;
        animation: flicker 3s infinite alternate; 
    h1::-moz-selection {
        background-color: var(--neon-border-color);
        color: var(--neon-text-color);
    h1::selection {
        background-color: var(--neon-border-color);
        color: var(--neon-text-color);
    @keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            -0.2rem -0.2rem 0.5rem #fff,
            0.2rem 0.2rem 0.5rem #fff,
            0 0 2rem var(--neon-text-color) ,
            0 0 4rem var(--neon-text-color) ,
            0 0 6rem var(--neon-text-color) ,
            0 0 8rem var(--neon-text-color) ,
            0 0 10rem var(--neon-text-color) ,
            0 0 12rem var(--neon-text-color) ;
         box-shadow: 
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 3rem var(--neon-border-color),
            inset 0 0 3rem var(--neon-border-color),
            0 0 6rem var(--neon-border-color),
            inset 0 0 6rem var(--neon-border-color)
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
</style>
复制代码

最终效果

/* 参考文章 codepen.io/GeorgePark/… */