2025年3月16日 星期日 甲辰(龙)年 月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

CSS -- text-shadow 实现字体发光效果

时间:11-24来源:作者:点击数:21

1、CSS字体发光效果:

CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果

1、text-shadow:该属性为文本添加阴影效果。

text-shadow: h-shadow v-shadow blur color;

2、参数说明:

参数名称 说明
h-shadow 水平阴影的位置(阴影水平偏移量),可为负值,必需
v-shadow 垂直阴影的位置(阴影垂直偏移量),可为负值,必需
blur 阴影模糊的距离(默认为0),可选
color 阴影颜色(默认为当前字体颜色),可选

3、说明:

1、乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果,其实不然,这正是 text-shadow 属性的精妙之处。

2、当阴影的水平偏移量 和 垂直偏移量都为0时,阴影就和文本重合了,这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

3、当然,为了使外发光更加炫酷,还需要使用到text-shadow 的另一个特性:同时设置多个阴影(使用逗号分隔设置多个阴影)。

  • <span>88.88</span>
  • span{
  • font-size: 22px;
  • text-shadow: 0px 0px 9px #159AFF;
  • font-weight: 600;
  • }
请添加图片描述
  • <div class="whfg">我会发光</div>
  • .whfg {
  • height: 600px; //设置一个高
  • line-height: 600px; //设置行高(垂直居中)
  • background-color: black; //黑色背景:黑
  • font-size: 120px; //字体120像素
  • color: white; //字体颜色:白
  • text-align: center; //水平居中
  • text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red; //设置发光效果
  • }
  • .whfg:hover{ //为了兼容不同的浏览器,所以声明两个
  • -webkit-animation: Glow 0.5s ease infinite alternate; //兼容Chrome
  • animation: Glow 0.5s ease infinite alternate;
  • }
  • @-webkit-keyframes Glow { //兼容Chrome 和 Safari
  • 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;
  • }
  • }
请添加图片描述
请添加图片描述

会闪烁

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐