[css] 用css3实现文字发光的效果
[css] 用css3实现文字发光的效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>霓虹文本</title>
</head>
<style>@import url(https://fonts.googleapis.com/css?family=Pacifico);body {display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;background: black;}.neon {color: #cce7f8;font-size: 2.5rem;font-family: 'Pacifico', cursive;text-transform: uppercase;animation: shining 0.1s alternate infinite;}@keyframes shining {from {text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),0 0 54px rgba(15, 115, 223, 0.9);}to {text-shadow: 0 0 6px rgba(182, 211, 207, 1),0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),0 0 60px rgba(15, 115, 223, 1);}}
</style><body><div class="neon">Good evening, and good night!</div>
</body></html>
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
[css] 用css3实现文字发光的效果相关推荐
- php实现动态按钮效果,HTML_很酷的CSS发光按钮实现方法,用CSS3实现的发光按钮效果,虽 - phpStudy...
很酷的CSS发光按钮实现方法 用CSS3实现的发光按钮效果,虽然只能在safari 4和chrome中才能看到最终效果,但我们还是能享受到css3带给我们的美好憧憬. 对每一个按钮,所作的只需三件事: ...
- CSS3的文字发光特效
这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面.另外,由于引用了特殊字体,所以整个文字效果看起来有着3D立体的特效,如果你的网络无法加载这些 ...
- html怎么在字体中加波浪线,CSS3实现文字波浪线效果
前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了linear-gradient属性,合角度.颜色.位置于一体,配合background-size,backgr ...
- [css] 使用css3实现一个斑马线的效果
[css] 使用css3实现一个斑马线的效果 @ferrinweb 如果需要很多或者无限扩展的斑马线,你这个方案就有缺点了 @cxwht 你的方案需要增加额外的元素,不太理想 最好的办法是用渐变背景实 ...
- css 边缘闪光_CSS 文字发光效果
CSS 文字的发光效果通过 text-shadow 实现起来很方便的. text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 0 -1px 1px #8 ...
- html 文字 跑马灯效果,CSS3 长文字跑马灯效果
raw js + css3 transition 跑马灯测试.跑马灯测试.跑马灯测试. @keyframes kf-marque-animation { 0% { transform: transla ...
- css字体描边加阴影,css text-shadow 轻松实现文字投影/描边/浮雕/剪纸/发光效果
css3很多知识值得我们去了解,一些我们惯常用图片制作出来的效果,也许用CSS3几行代码就能实现,正如本文介绍的,使用css text-shadow 属性,就能轻松实现文字投影/描边/浮雕/剪纸/发光 ...
- [css] 用css3实现伪3D的文字效果
[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- css 霓虹灯转动效果,CSS3霓虹灯文字动画特效
这是一个完全由CSS3实现的霓虹灯文字动画特效,虽然看起来有flash的质感和js驱动的错觉,但事实上你可以看到所有代码如下:html> CSS3霓虹灯文字特效 .text-effect { o ...
最新文章
- Mac设置信认任意来源应用
- Linux下ps查找进程用kill终止命令
- 开发日记-20190502 关键词 汇编语言(一)
- CloudStack的基本使用
- 瞿菡云计算机,“国家资助 伴我成长”——我校学生王丽娜、肖云菡荣获中职教育“国家奖学金”事迹材料...
- Android Bitmap OutOfMemory 解决的方法
- jupyter notebook 主题
- 深入理解C#:编程技巧总结(二)
- redhat6.5 升级内核
- Python库 Pandas 安装失败解决方案
- Ceph集群配置系列《四》Ceph块设备/RBD的使用
- Conky-colors详细教程
- Linux性能分析工具
- webrtc-audio-processing pulseaudio最新版本1.0交叉编译到ARM
- 如何快速将手写数据录入 Excel
- 数据库优化之降龙十八掌
- word模板填充数据
- 预训练模型 Fine-tuning
- JAVA和Python HmacSHA1 算法计算API签名的实现
- WIN10 动态磁盘转基本磁盘
热门文章
- [转]FFMPEG调节音频的音量大小,混音
- bootstrap基础学习十篇
- 放松时刻——C#分割字符串
- 京东WebService调用 求助~~~~~
- 最高法院明确反向工程合法 腾讯诉PICA恐生变
- 学习程序开发的方法,仅供参考吧
- php可变变量讲解,PHP可变变量实例详解
- golang 结构体断言_Golang中的reflect原理
- c盘users的用户名怎么改_做完这几个操作,我从C盘中清理了30G垃圾文件
- Linux下如何抓取串口码流,linux alsa音频中采样率fs、比特率BCLK 、主时钟MCLK关系...