5分钟教你学会超简单的html+css魔幻霓虹灯文字特效
更新时间：2023年03月27日 16:06:47 作者：北极光之夜。
这篇文章5分钟教你学会超简单的html+css魔幻霓虹灯文字特效,只用简单的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>
到此这篇关于5分钟教你学会超简单的html+css魔幻霓虹灯文字特效的文章就介绍到这了,更多相关html+css霓虹灯文字特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失2010-06-06
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,需要的朋友可以了解下2012-12-12
为什么说它是智能滚动呢？因为如果我们在布局网页的时候，预留的滚动区域太小的话，有可能文字会有一部分看不到，本款代码可以智能判断区域大小，如果不够显示文字，那么它会控制文字做相应的左右滚动.2009-10-10
Javascript把小写字母依次变为大写，严格来说不算是大小写转换程序，它主要是把文字按一定顺序依次变为小写的，估计有人要用到吧。2009-10-10
让浏览器窗口中的滚动条打破常规出现在网页的左侧，记得在藏文的一些网站，经常看到网页滚动条居左，不知为何居左，可能是某些人群的使用习惯吧。2010-09-09
文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效，文字一个一个地打印在页面上。2011-01-01
走马灯效果的链接提示，大家的需求不一样，因此可能有朋友会喜欢这样的链接提示，用到的话，再好好美化一下，其实效果还是不错的。2009-10-10
网页上跳动的文字，代码稍复杂，效果挺可爱的，一跳一跳的文字，真逗人！2009-10-10
这篇文章5分钟教你学会超简单的html+css魔幻霓虹灯文字特效,只用简单的html+css就可以完成,不需要配置运行环境,魔幻的霓虹灯特效非常炫酷,一起来学习一下,需要的朋友可以参考下2023-03-03
为了提高用户体验和易用度，一些设计师会对网页中用户经常用的东西进行优化，比如输入框。一般的输入框是怎样优化的呢？从用户体验的角度出发，简化用户使用步骤，让用户用得更方便就是提高了易用性2015-09-09
最新评论