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

Posted 北极光之夜。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了超简单的魔幻霓虹灯文字特效 html+css相关的知识,希望对你有一定的参考价值。

话不多,先看效果:

在这里插入图片描述

今天继续分享简单但有趣的CSS创意特效~
这个效果很简单看一分钟就明白了~
初学前端的小伙伴们拿来练手是很不错的~

实现过程(完整源码在最后):

1. 定义h3标签:

   <h3>Aurora Borealis night</h3>

2. 给个body背景色:

   body{
            background-color: rgb(4, 15, 36);
        }

3. 设置h3基本样式:

 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;
        }

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中对齐。先left与top 50%,再偏移自身长度与宽度50%达到居中。
text-align: center; 文字居中。
text-transform: uppercase; 字母变为大写。
letter-spacing: 10px; 每个字符间距离。
-webkit-box-reflect: 倒影效果。
animation: san 6s linear infinite; 定义动画。
4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果:

  @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);
            }
        }

filter: blur(2px); 模糊
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);
文字阴影。写多行是为了阴影叠加,效果更亮。

完整源码:

<!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>Document</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>Aurora Borealis night</h3>
</body>
</html>

总结:

今日份好歌推荐:《小宇》— 蓝心羽 不管未来会怎么样,至少我们现在很开心~

在这里插入图片描述
关注我看更多简单创意特效~

其它文章:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~

以上是关于超简单的魔幻霓虹灯文字特效 html+css的主要内容,如果未能解决你的问题,请参考以下文章

JS框架_(Typed.js)彩色霓虹灯发光文字动画

161-电池按钮酷炫霓虹灯悬停特效

09.霓虹灯加载特效

html+css+js制作一个超炫酷的雪花特效

HTML+CSS+JS实现 ❤️透明的水滴文字背景特效❤️

每天一个CSS小特效,文字闪烁——钢铁侠:爱你三千遍