CSS3炫酷发光文字 ，自定义色彩
2024-05-11 06:52:15
这是一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。
HTML代码
<div id="container"><p><a href="#">RED</a></p><p><a href="#">BLUE</a></p><p><a href="#">Yellow</a></p><p><a href="#">GREEN</a></p><p><a href="#">ORANGE</a></p><p><a href="#">VIOLET</a></p></div>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
CSS代码
/*setup*/
*{margin: 0;padding: 0;
}@font-face {font-family: 'Monoton';font-style: normal;font-weight: 400;src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}@font-face {font-family: 'Iceland';font-style: normal;font-weight: 400;src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
}@font-face {font-family: 'Pacifico';font-style: normal;font-weight: 400;src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}@font-face {font-family: 'PressStart';font-style: normal;font-weight: 400;src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
}@font-face {font-family: 'Audiowide';font-style: normal;font-weight: 400;src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}@font-face {font-family: 'Vampiro One';font-style: normal;font-weight: 400;src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}body{background-color: #222222;
}#container{margin:auto;
}/*neeeeoooon*/
p{text-align:center;font-size:7em;margin:20px 0 20px 0;
}a{text-decoration:none; -webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;
}p:nth-child(1) a{color:#FF1177;font-family:Monoton;
}
p:nth-child(1) a:hover{-webkit-animation: neon1 1.5s ease-in-out infinite alternate;-moz-animation: neon1 1.5s ease-in-out infinite alternate;animation: neon1 1.5s ease-in-out infinite alternate;
}p:nth-child(2) a{font-size:1.5em;color:#228DFF;font-family:Iceland;
}
p:nth-child(2) a:hover{-webkit-animation: neon2 1.5s ease-in-out infinite alternate;-moz-animation: neon2 1.5s ease-in-out infinite alternate;animation: neon2 1.5s ease-in-out infinite alternate;
}p:nth-child(3) a{color:#FFDD1B;font-family:Pacifico;
}
p:nth-child(3) a:hover{ -webkit-animation: neon3 1.5s ease-in-out infinite alternate;-moz-animation: neon3 1.5s ease-in-out infinite alternate;animation: neon3 1.5s ease-in-out infinite alternate;
}p:nth-child(4) a{color:#B6FF00;font-family:PressStart;font-size:0.8em;
}
p:nth-child(4) a:hover{-webkit-animation: neon4 1.5s ease-in-out infinite alternate;-moz-animation: neon4 1.5s ease-in-out infinite alternate;animation: neon4 1.5s ease-in-out infinite alternate;
}p:nth-child(5) a{color:#FF9900;font-family:Audiowide;
}
p:nth-child(5) a:hover{-webkit-animation: neon5 1.5s ease-in-out infinite alternate;-moz-animation: neon5 1.5s ease-in-out infinite alternate;animation: neon5 1.5s ease-in-out infinite alternate;
}p:nth-child(6) a{color:#BA01FF;font-family:Vampiro One;
}
p:nth-child(6) a:hover{-webkit-animation: neon6 1.5s ease-in-out infinite alternate;-moz-animation: neon6 1.5s ease-in-out infinite alternate;animation: neon6 1.5s ease-in-out infinite alternate;
}p a:hover{
color:#ffffff;
}/*glow for webkit*/
@-webkit-keyframes neon1 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF1177,0 0 70px #FF1177,0 0 80px #FF1177,0 0 100px #FF1177,0 0 150px #FF1177;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF1177,0 0 35px #FF1177,0 0 40px #FF1177,0 0 50px #FF1177,0 0 75px #FF1177;}
}@-webkit-keyframes neon2 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #228DFF,0 0 70px #228DFF,0 0 80px #228DFF,0 0 100px #228DFF,0 0 150px #228DFF;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}
}@-webkit-keyframes neon3 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FFDD1B,0 0 70px #FFDD1B,0 0 80px #FFDD1B,0 0 100px #FFDD1B,0 0 150px #FFDD1B;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FFDD1B,0 0 35px #FFDD1B,0 0 40px #FFDD1B,0 0 50px #FFDD1B,0 0 75px #FFDD1B;}
}@-webkit-keyframes neon4 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #B6FF00,0 0 70px #B6FF00,0 0 80px #B6FF00,0 0 100px #B6FF00,0 0 150px #B6FF00;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #B6FF00,0 0 35px #B6FF00,0 0 40px #B6FF00,0 0 50px #B6FF00,0 0 75px #B6FF00;}
}@-webkit-keyframes neon5 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF9900,0 0 70px #FF9900,0 0 80px #FF9900,0 0 100px #FF9900,0 0 150px #FF9900;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF9900,0 0 35px #FF9900,0 0 40px #FF9900,0 0 50px #FF9900,0 0 75px #FF9900;}
}@-webkit-keyframes neon6 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff00de,0 0 35px #ff00de,0 0 40px #ff00de,0 0 50px #ff00de,0 0 75px #ff00de;}
}/*glow for mozilla*/
@-moz-keyframes neon1 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF1177,0 0 70px #FF1177,0 0 80px #FF1177,0 0 100px #FF1177,0 0 150px #FF1177;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF1177,0 0 35px #FF1177,0 0 40px #FF1177,0 0 50px #FF1177,0 0 75px #FF1177;}
}@-moz-keyframes neon2 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #228DFF,0 0 70px #228DFF,0 0 80px #228DFF,0 0 100px #228DFF,0 0 150px #228DFF;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}
}@-moz-keyframes neon3 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FFDD1B,0 0 70px #FFDD1B,0 0 80px #FFDD1B,0 0 100px #FFDD1B,0 0 150px #FFDD1B;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FFDD1B,0 0 35px #FFDD1B,0 0 40px #FFDD1B,0 0 50px #FFDD1B,0 0 75px #FFDD1B;}
}@-moz-keyframes neon4 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #B6FF00,0 0 70px #B6FF00,0 0 80px #B6FF00,0 0 100px #B6FF00,0 0 150px #B6FF00;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #B6FF00,0 0 35px #B6FF00,0 0 40px #B6FF00,0 0 50px #B6FF00,0 0 75px #B6FF00;}
}@-moz-keyframes neon5 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF9900,0 0 70px #FF9900,0 0 80px #FF9900,0 0 100px #FF9900,0 0 150px #FF9900;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF9900,0 0 35px #FF9900,0 0 40px #FF9900,0 0 50px #FF9900,0 0 75px #FF9900;}
}@-moz-keyframes neon6 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff00de,0 0 35px #ff00de,0 0 40px #ff00de,0 0 50px #ff00de,0 0 75px #ff00de;}
}/*glow*/
@keyframes neon1 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF1177,0 0 70px #FF1177,0 0 80px #FF1177,0 0 100px #FF1177,0 0 150px #FF1177;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF1177,0 0 35px #FF1177,0 0 40px #FF1177,0 0 50px #FF1177,0 0 75px #FF1177;}
}@keyframes neon2 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #228DFF,0 0 70px #228DFF,0 0 80px #228DFF,0 0 100px #228DFF,0 0 150px #228DFF;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}
}@keyframes neon3 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FFDD1B,0 0 70px #FFDD1B,0 0 80px #FFDD1B,0 0 100px #FFDD1B,0 0 150px #FFDD1B;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FFDD1B,0 0 35px #FFDD1B,0 0 40px #FFDD1B,0 0 50px #FFDD1B,0 0 75px #FFDD1B;}
}@keyframes neon4 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #B6FF00,0 0 70px #B6FF00,0 0 80px #B6FF00,0 0 100px #B6FF00,0 0 150px #B6FF00;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #B6FF00,0 0 35px #B6FF00,0 0 40px #B6FF00,0 0 50px #B6FF00,0 0 75px #B6FF00;}
}@keyframes neon5 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #FF9900,0 0 70px #FF9900,0 0 80px #FF9900,0 0 100px #FF9900,0 0 150px #FF9900;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #FF9900,0 0 35px #FF9900,0 0 40px #FF9900,0 0 50px #FF9900,0 0 75px #FF9900;}
}@keyframes neon6 {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff00de,0 0 35px #ff00de,0 0 40px #ff00de,0 0 50px #ff00de,0 0 75px #ff00de;}
}/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) {#container{width: 100%;}p{font-size:3.5em;}}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
CSS3炫酷发光文字 ，自定义色彩相关推荐
- web前端入门到实战：CSS3炫酷发光文字 ，自定义色彩
这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面.另外,由于引用了特殊字体,所以整个文字效果看起来有着3D立体的特效,如果你的网络无法加载这些 ...
- CSS 3.0实现炫酷发光特效
给大家分享一个用CSS 3.0实现的炫酷发光特效,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
- HTML5+CSS3小实例：酷炫的ANIPLEX文字特效
HTML5+CSS3实现酷炫的ANIPLEX文字特效,这个案例动画有点多,不过效果是真的酷炫,可以用来做网站的开屏动画,不多废话,直接看效果吧. 效果: 源码: <!DOCTYPE html&g ...
- 用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构 该CS ...
- 炫酷背光文字html,详细PS教程大放送：如何快速做出高级创意的文字背光效果？...
原标题:详细PS教程大放送:如何快速做出高级创意的文字背光效果? 现在做海报,做广告等,都需要有文案,高级炫酷的文字,会为你的作品加分,让整张海报瞬间高逼格,那如何快速用ps做错高级创意的文字背光效果 ...
- 设置文字为计算机屏幕保护,win10系统设置炫酷三维文字屏幕保护的具体技巧
有关win10系统设置炫酷三维文字屏幕保护的操作方法想必大家有所耳闻.但是能够对win10系统设置炫酷三维文字屏幕保护进行实际操作的人却不多.其实解决win10系统设置炫酷三维文字屏幕保护的问题也不是 ...
- ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库
把网页上的文字变成酷炫的 3D 风格,还能制作旋转动效,有了 ztext.js,只需要几行代码. ztext 能做什么 ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库,让开 ...
- Photoshop文字特效——炫彩效果文字
要制作一个炫彩效果的文字 1. 首先,我们要应用一个深色的背景,以衬托文字的色彩 2. 为文字执行模糊效果,使其产生朦胧的感觉 3. 对已模糊的图像进行"晶格化"设置,从而产 ...
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
最新文章
- Asp.Net MVC2.0 Url 路由入门---实例篇
- java 庖丁解牛api_Java Restful API Best Practices
- 对Angular使用了HttpClient的服务进行单元测试
- Natasha V1.3.6.0 的升级日志
- Extjs发票管理系统
- libevent c++高并发网络编程_【多线程高并发编程】Callable源码分析
- asp.net 下载文件
- 牛客小白月赛2 G 文 【模拟】
- C#语言课程11月11日
- linux chown 命令
- ps写php,PS是什么
- rpcbind 服务启动失败
- 二元序列游程编码c语言,基于游程编码数据压缩算法设计与实现.doc
- matlab的图片压缩两种方法（DCT方法与行程编码压缩方法）
- 用python计算个人所得税计算器_教你使用Python实现新个税计算器
- 外贸商城建站程序, sylius和magento哪一个更适合企业二次开发
- PTA 校选拔 7-10 宇航员的寻宝图（BFS）
- MT8735芯片技术资料解析，MT8735处理器简介
- tensorflow2.3版本 LSTM作为最后输出层 报错Function call stack: train_function -＞ train_function -＞ train_functio
- 升级iOS 16后续航时间变短了，如何提升续航？