• 女性之声——全国妇联 2019-04-20
  • 我国居民人均预期寿命又提高了 2017年提高至76.7岁 2019-04-15
  • OPPO宣布新人事任命:副总裁吴强全面负责海外市场 2019-04-08
  • 网约车新政11月1日起实施 专家呼吁慎用数量管控 2019-04-05
  • “香会”,中国代表团驳斥美防长言论 2019-04-05
  • 马克思的每个人全面而自由发展,是人的最高需求层次理论。 2019-04-02
  • 漫步白桦林 感受夏的清凉与宁静 2019-04-02
  • 《迷失地铁》王真儿为角色克服恐水症 2019-04-01
  • “五毒月”禁忌应当学 竹林日记(0074) 2019-04-01
  • 又是一对双胞胎!成都大熊猫“艾莉”产仔 2019-04-01
  • 陕西省贫困村驻村工作队选派管理办法出台 2019-03-31
  • 海南:三种方式为人才提供住房支持 2019-03-29
  • 前线 OPPO Find X屏占比公布:93.8%,正面无敌 2019-03-29
  • 网络舆情参考(2018年第21期 总第320期) 2019-03-28
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-03-28
  • 霓虹灯文字动画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>
    我爱搜科技


    代码如下:





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

    本文标签:

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

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

    发表评论

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

    评论

    1条评论
    1. avatar

      邪少资源网 回复

      没法复制啊

      山西省晋城市 联通

      ?
    2. 女性之声——全国妇联 2019-04-20
    3. 我国居民人均预期寿命又提高了 2017年提高至76.7岁 2019-04-15
    4. OPPO宣布新人事任命:副总裁吴强全面负责海外市场 2019-04-08
    5. 网约车新政11月1日起实施 专家呼吁慎用数量管控 2019-04-05
    6. “香会”,中国代表团驳斥美防长言论 2019-04-05
    7. 马克思的每个人全面而自由发展,是人的最高需求层次理论。 2019-04-02
    8. 漫步白桦林 感受夏的清凉与宁静 2019-04-02
    9. 《迷失地铁》王真儿为角色克服恐水症 2019-04-01
    10. “五毒月”禁忌应当学 竹林日记(0074) 2019-04-01
    11. 又是一对双胞胎!成都大熊猫“艾莉”产仔 2019-04-01
    12. 陕西省贫困村驻村工作队选派管理办法出台 2019-03-31
    13. 海南:三种方式为人才提供住房支持 2019-03-29
    14. 前线 OPPO Find X屏占比公布:93.8%,正面无敌 2019-03-29
    15. 网络舆情参考(2018年第21期 总第320期) 2019-03-28
    16. 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-03-28
    17. pk10高手论坛交流区 新疆时时彩开彩结果 2元彩票网双色球走势图 福建福彩 福利彩票36选7 超级大乐透开奖时间 新时时彩五星技巧 彩吧p3开机号试机号查询 山东体彩快乐扑克3 体育彩票走势图61 体彩11选5走势图 北京赛车pk10开奖网 腾讯分分彩0369技巧 黑金团队快乐8官方网址 香港赛马排位表及赛果 北京赛车群二维码