• 一语惊坛(6月7日):祝考生旗开得胜! 2019-02-22
  • 过年如何时尚返乡  12种男版围巾系法送给你 2019-02-22
  • 霓虹灯文字动画css效果

    • 内容
    • 相关
     广西福彩快乐双彩 www.ibze.net <!DOCTYPE html>
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>霓虹灯文字动画</title>
    
    
    
    <style>body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    
    .neon {
        position: relative;
        overflow: hidden;
        filter: brightness(200%);
    }
    
    .text {
        background-color: black;
        color: white;
        font-size: 180px;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
        position: relative;
        user-select: none;
    }
    
    .text::before {
        content: attr(data-text);
        position: absolute;
        color: white;
        filter: blur(0.02em);
        mix-blend-mode: difference;
    }
    
    .gradient {
        position: absolute;
        background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        mix-blend-mode: multiply;
    }
    
    .spotlight {
        position: absolute;
        top: -100%;
        left: -100%;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(
                circle,
                white,
                transparent 25%
            ) center / 25% 25%,
            radial-gradient(
                circle,
                white,
                black 25%
            ) center / 12.5% 12.5%;
        animation: light 5s linear infinite;
        mix-blend-mode: color-dodge;
    }
    
    @keyframes light {
        to {
            transform: translate(50%, 50%);
        }
    }
    </style>
    
    
    </head>
    
    <body style="">
    
    <div class="neon">
    	<span class="text" data-text="我爱搜科技">我爱搜科技</span>
    	<span class="gradient"></span>
    	<span class="spotlight"></span>
    </div>
    
    
    
    
    
    
    </body></html>
    我爱搜科技


    代码如下:





    热度:1467° 评分:8.7 发布时间: 2018年9月17日

    本文标签:

    版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

    本文链接:霓虹灯文字动画css效果 - //www.ibze.net/post-1095.html

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    评论

    1条评论
    1. avatar

      邪少资源网 回复

      没法复制啊

      山西省晋城市 联通

    2. 一语惊坛(6月7日):祝考生旗开得胜! 2019-02-22
    3. 过年如何时尚返乡  12种男版围巾系法送给你 2019-02-22