霓虹灯闪耀效果-html代码-BFW代码库

霓虹灯闪耀效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
@font-face {
        font-family: Clip;
        src: url("https://acupoftee.github.io/fonts/Clip.ttf");
    }

        body {
            background-color: #141114;
            background-image: linear-gradient(335deg, black 23px, transparent 23px),
            linear-gradient(155deg, black 23px, transparent 23px),
            linear-gradient(335deg, black 23px, transparent 23px),
            linear-gradient(155deg, black 23px, transparent 23px);
            background-size: 58px 58px;
            background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
        }

        .sign {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 50%;
            background-image: radial-gradient(
            ellipse 50% 35% at 50% 50%,
            #6b1839,
            transparent
            );
            transform: translate(-50%, -50%);
            letter-spacing: 2;
            left: 50%;
            top: 50%;
            font-family: "Clip";
            text-transform: uppercase;
            font-size: 6em;
            color: #ffe6ff;
            text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
            -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
            0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
            animation: shine 2s forwards, flicker 3s infinite;
        }

@keyframes blink {
            0%,
            22%,
            36%,
            75% {
                color: #ffe6ff;
                text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
                -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
                0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
            }
            28%,
            33% {
                color: #ff65bd;
                text-shadow: none;
            }
            82%,
            97% {
                color: #ff2483;
                text-shadow: none;
            }
        }

        .flicker {
            animation: shine 2s forwards, blink 3s 2s infinite;
        }

        .fast-flicker {
            animation: shine 2s forwards, blink 10s 1s infinite;
        }

@keyframes shine {
            0% {
                color: #6b1839;
                text-shadow: none;
            }
            100% {
      .........完整代码请登录后点击上方下载按钮下载查看