超简单的html+css魔幻霓虹灯文字特效

简介: 超简单的html+css魔幻霓虹灯文字特效

超简单的html+css魔幻霓虹灯文字特效,
效果如下
texiao_nihongdeng.png

动态效果,自行查看,创建一个空白的html文件,将下面代码拷贝进去,双击html文件运行即可

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ沐编程www.qqmu.com</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
    
    
            background-color: rgb(4, 15, 36);
        }
        h3{
    
    
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            text-align: center;
            font-size: 3em;
            text-transform: uppercase;
            letter-spacing: 10px;
            color: rgb(4, 15, 36); 
            -webkit-box-reflect: below 1px linear-gradient(transparent ,rgb(218, 218, 218));
            animation: san 6s linear infinite;
        }
        @keyframes san{
    
    
            0%,15%,50%,52%,70%,90%,99.1%{
    
    
                color: rgb(4, 15, 36);
                filter: blur(2px);
            }
            12%,15.1%,60%,70.1%,90.5%,100%{
    
    
                color: rgb(255, 255, 255);
                text-shadow: 0 0 5px rgb(22, 138, 216),
                0 0 25px rgb(22, 138, 216),
                0 0 35px rgb(22, 138, 216),
                0 0 105px rgb(22, 138, 216),
                0 0 155px rgb(22, 138, 216);
                filter: blur(0px);
            }
        }
    </style>
</head>
<body>
    <h3>QQ沐编程欢迎您!www.qqmu.com</h3>
</body>
</html>
相关文章
|
9天前
|
前端开发
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
HTML+CSS实现奇特的的企业官网效果
|
9天前
|
前端开发 JavaScript
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
打造现代感十足的卡片式企业官网:HTML+CSS全攻略!
|
9天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
4天前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
14 1
简单几行代码CSS实现网页自动打文字效果
|
3天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
9天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
9天前
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
|
9天前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
9天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
9天前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
下一篇
云函数