5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

目录
  • 实现过程（完整源码在最后）：
    • 1. 定义h3标签：
    • 2. 给个body背景色：
    • 3. 设置h3基本样式：
    • 4.定义动画，就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果：
  • 完整源码：

话不多，先看效果：

今天继续分享简单但有趣的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霓虹灯文字特效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • html+css+js实现canvas跟随鼠标的小圆特效源码

    html+css+js实现canvas跟随鼠标的小圆特效源码

    效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate

  • 2014 HTML5/CSS3热门动画特效TOP10

    2014 HTML5/CSS3热门动画特效TOP10

    1.HTML5+CSS3实现的模拟真人奔跑动画特效 今天要分享一款很酷的模拟真人奔跑动画,它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的.这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影.更重要的是当人物跑的越来越近是,人物的大小也会随之变大.很像一个小男孩从远处跑过来. 在线演示 源码下载 2.jQuery实现的四款支持不同自定义图片切换的焦点图插件特效 jQuery实现的四款支持不同自定义图片切换的焦点图插件特效源码L_slide.js,是一段可以

  • 使用html+css实现页面书本翻页特效

    目录 效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. 2.定义书本的基本属性,宽高,阴影等,伪类是下面和右面那两条阴影. 3.鼠标经过,阴影变化,然后书本向左旋转: 4.封面的基本样式: 5.封面旋转: 完整代码: 效果: 实现: 1.定义标签,shu是书本,feng是封面,wen是文字内容. <div class="shu"> <div class="feng"></div> <div cl

  • 使用html+css制作一个发光立方体特效

    目录 一.话不多,看效果 二.实现(附完整代码) 1.定义标签: 2.定义外层盒子css: 3.定义盒子6个面分别的样式: 一.话不多,看效果 二.实现(附完整代码) 1.定义标签: <div class="container"> <div class="q1"></div> <div class="h2"></div> <div class="z3">&

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • 基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&

  • 5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

    目录 实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背

  • 一篇文章教你学会使用Python绘制甘特图

    一篇文章教你学会使用Python绘制甘特图

    目录 优点 局限 一日一书 用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project.GanttProject.WARCHART XGantt.jQuery.Gantt.Excel等,网络上也有一些优质工具支持在线绘制甘特图. 可是这种现成的工具,往往也存在一些弊端,让编程人员不知所措.比如说,花里胡哨的UI,让人目不暇接,不知点哪个才好: 比如说,有些基于浏览器的图表需要掌握HTML.JS等编程语言,只会点Python的我直接被劝退: 再比如,进来就是注册.登

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • 10分钟教你用Python实现微信自动回复功能

     01 前言&&效果展示 相信大家都有忙碌的时候,不可能一直守在微信上及时回复消息.但微信又不能像QQ一样设置自动回复.无妨,今天,我们就来用Python实现微信的自动回复功能吧,并且把接收到的消息统一发送到文件助手里面,方便统一查看. 效果如下: 02 环境准备 Python版本:3.6.0 系统平台:Windows 10 X64 IDE:pycharm 相关模块: time模块: itchat模块: 以及一些Python自带的模块. 03 实现原理 其实原理很简单,主要是利用itcha

  • 基于vue-cli、elementUI的Vue超简单入门小例子（推荐）

    这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Pro

  • 三分钟教你如何在IDEA中快速创建工程的方法

    1. 创建Java工程 1. 打开的初始界面 Create New Project:创建一个新的工程 Import Project:导入一个现有的工程 Open:打开一个已有工程.比如:可以打开 Eclipse 项目. Check out from VersionControl:可以通过服务器上的项目地址 check out Github上面项目或其他 Git 托管服务器上的项目 2. 新建项目 如果要创建 Web 工程,则需要勾选上面的 Web Application.如果不需要创建 Web

  • 快速解决Tomcat启动慢的问题,超简单

    今天在帮一位同学解决了一个问题--Tomcat启动超级慢,大概五六分钟.解决之后,只需要3秒钟即可启动. 问题怎么解决呢? 在Tomcat的bin目录下找到catalina.sh,然后打开它,在以下位置添加一行代码: -Djava.security.egd=file:/dev/urandom 2019年02月12日补充:很多朋友想知道原理,我就简单说明一下. Tomcat 7和Tomcat 8在启动的时候会调用org.apache.catalina.util.SessionIdGenerator

  • 五分钟教你手写 SpringBoot 本地事务管理实现

    五分钟教你手写 SpringBoot 本地事务管理实现

    白菜Java自习室 涵盖核心知识 1. SpringBoot 事务 一直在用 SpringBoot 中的 @Transactional 来做事务管理,但是很少没想过 SpringBoot 是如何实现事务管理的,今天从源码入手,看看 @Transactional 是如何实现事务的,最后我们结合源码的理解,自己动手写一个类似的注解来实现事务管理,帮助我们加深理解. 1.1. 事务的隔离级别 事务为什么需要隔离级别呢?这是因为在并发事务情况下,如果没有隔离级别会导致如下问题: 脏读 (Dirty Re

  • 一篇教程教你学会Python进制转换(十进制转二进制、八进制、十六进制)

    一篇教程教你学会Python进制转换(十进制转二进制、八进制、十六进制)

    一.导言 导语: 在计算机进行数据交换时,常常会有一个进制转换的过程,我们知道计算机只认0 和 1.在内存系统中,基本基于二进制进行运算的,但是有时候数据过于庞大,为了方便存储管理,计算机会使用十六进制存储数据,但是怎么实现数据转换呢? 我们人类由十根手指头,所以自然就使用十进制啦,每当我们数数字到10之后,于是就重0 开始继续数,所以逢十进一就这么来了. 对于其它进制呢,也是同样的,比如最常见的二进制,也就是逢二进一,慢慢来,依次类推,所以数学的世界是多么的奇妙呀! 今天给大家带来的是使用 P

  • 5分钟教你docker安装启动redis全教程(全新方式)

    什么是redis 根据百度百科介绍,Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.是一个高性能(NOSQL)Key-Value数据库,并提供多种语言的API,redis也是完全开源免费的,遵守BSD协议. 什么又是NOSQL NOSQL,泛指非关系型的数据库,提到非关系型的数据库,我们就来简单讲讲关系型数据库,关系型数据库,大家都知道的oracle,mysql,postgre等都是关

随机推荐