php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下。
博客页面左上角的“猿来是勇者”文字已制作发光效果,分享方法如下:
该属性为文本添加阴影效果text-shadow:h-shadow v-shadow blur color;
h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需
v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需
blur: 阴影模糊的距离(默认为0),可选
color: 阴影颜色(默认为当前字体颜色),可选
乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。
其实不然,这正是 text-shadow 属性的精妙之处。
当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了
这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。
当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)
代码实例
HTML Code
xinpureZhu
CSS Codebody {
background: #000;
}
.container {
width: 600px;
margin: 100px auto 0;
}
p {
font-family: 'Audiowide';
text-align: center;
color: #00a67c;
font-size: 7em;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
p:hover {
color: #fff;
-webkit-animation: Glow 1.5s ease infinite alternate;
animation: Glow 1.5s ease infinite alternate;
}
@-webkit-keyframes Glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #00a67c,
0 0 70px #00a67c,
0 0 80px #00a67c,
0 0 100px #00a67c,
0 0 150px #00a67c;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #00a67c,
0 0 35px #00a67c,
0 0 40px #00a67c,
0 0 50px #00a67c,
0 0 75px #00a67c;
}
}
@keyframes Glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #00a67c,
0 0 70px #00a67c,
0 0 80px #00a67c,
0 0 100px #00a67c,
0 0 150px #00a67c;
}
to {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #00a67c,
0 0 35px #00a67c,
0 0 40px #00a67c,
0 0 50px #00a67c,
0 0 75px #00a67c;
}
}
效果示图
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php发光字体代码,CSS3怎么实现字体发光效果相关推荐
- php发光字体代码,CSS3实现字体发光效果(代码实例)
本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. text-shadow 该属性为文本添加阴影效果text-shadow: h- ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- html5 css3实现幻灯片效果代码,CSS3实现的渐变幻灯片效果
实现效果 代码 html CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app with ...
- html代码控制字体上下浮动,css3动画 实现字体闪烁或者灯泡上下浮动
话不多少,直接贴代码` .el-loading-mask { position: absolute; z-index: 10000; background-color: rgba(255, 255, ...
- html实现凹陷效果,css3怎么实现字体凹陷凸出效果?(附代码)
本篇文章主要给大家介绍用css3实现字体凹陷或凸出效果的实现方法. 我们在设计网页时,常常会需要考虑到用户体验,那么足够美观的网页才能吸引住用户.为了让网页内容更加丰富好看,我们可能会使用ps做出很多 ...
- html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
- typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
目录 0. 授人以渔 1.主题字体 2.代码块字体大小 3.引用块字体大小 4.代码块背景颜色 ①pink老师的样式代码 ②自己搜到的样式 5.块代码字体大小 6.修改文章可写区域的宽度 0. 授人以 ...
- css linux 等宽字体,CSS3 等宽字体与ch单位的详解
下面我们来看一篇关于CSS3 等宽字体与ch单位的使用方法介绍,希望这篇文章能够让各位理解到css中ch单位及字体等宽问题哦. 一.什么是等宽字体? 所谓等宽字体,一般是针对英文字体而言的.东亚字体, ...
- ios开发 html 字体模糊效果,CSS3实现苹果手机解锁的字体闪亮效果示例
0.前言 2016年08月18日 今天看到注意到苹果手机的滑动解锁,提示字上会有一道白光闪过,感觉很炫酷,所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时,白光一闪而过,照亮字体的效果. 1 ...
最新文章
- 守望者逃离 java_守望者的逃离 (Java代码)
- springcloud(二):注册中心Eureka
- 一个C++加密工具EncryptDecrypt.dll
- 作者:李冰(1989-),女,中国电子技术标准化研究院工程师。
- 实现Windows访问Linux文件系统
- 36. Valid Sudoku/37. Sudoku Solver - 数独问题-- backtracking 经典
- QT应用编程: windows下QT调用COM组件
- java 根号x_java如和开根号
- 【马克思主义基本原理】--第二章--实践与认识及其发展规律
- Rax新手入门 - 快速构建多端应用
- 解决“微信与此IPAD不兼容
- 百度大脑iOCR助力财务报销智能化,省时省力
- win10 计算机管理器没有ime,Win10电脑右下角提示“已禁用IME”的6种解决方法
- CSS中:margin和padding的区别 margin:auto与margin: 0 auto区别
- 一篇文章让你掌握HTML+CSS
- 2020ICPC上海 C.Sum of Log
- 双精度改单精度c语言程序,C语言菜鸟基础教程之单精度浮点数与双精度浮点数...
- 成为一名合格的算法工程师需要掌握哪些技能?
- CSS Table不换行与换行的用法
- Python 当前时间是那一年第几周的周几