css实现文字字母弥红灯闪烁动画效果代码-html代码-BFW代码库

css实现文字字母弥红灯闪烁动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字字母弥红灯闪烁动画效果代码

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

<html>
<head>
    <style>
        .text-effect {
            overflow: hidden;
            position: relative;
            filter: contrast(110%) brightness(190%);
        }

        .neon {
            position: relative;
            background: black;
            color: transparent;
        }
        .neon::before, .neon::after {
            content: attr(data-text);
            color: white;
            filter: blur(0.02em);
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }
        .neon::after {
            mix-blend-mode: difference;
        }

        .gradient,
        .spotlight {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            pointer-events: none;
            z-index: 10;
        }

        .gradient {
            background: linear-gradient(45deg, red, blue);
            mix-blend-mode: multiply;
        }

        .spotlight {
            -webkit-animation: light 5s infinite linear;
            animation: light 5s infinite linear;
            background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
            top: -100%;
            left: -100%;
            mix-blend-mode: color-dodge;
        }
.........完整代码请登录后点击上方下载按钮下载查看