css特效之发光效果

css特效之发光效果

一、前言

今天也是带大家来看看css特效，大家伙随便看看就好。

二、引子

平时项目里经常会有需要用到酷炫的字体效果，特别是大屏项目，一般都是要高大上、狂拽炫的。

要实现这样的效果，一个是需要特殊的字体，另一个就是需要css来帮衬了。

比如下面这种效果，首先是用了Pacifico的字体，在线地址（fonts.googleapis.com/css?family=… 可以通过link标签或者import+url直接引入。

其他字体可以查看这个网址fonts.google.com/?hl=zh-cn （要梯子）

更换其他字体，基本上就是参数改一下， family='想要的fontName'，感兴趣的自己去看看。

下面回到本文的正题，字体使用后，还达不到这样的效果，只有干巴巴的效果，比起上面的效果差了不少。

所以加点发光效果会更有科技感一些，赛博朋克风一些。本文选用text-shadow文字阴影这一属性，来实现发光效果。

三、 阴影属性

1、text-shadow

文字阴影的语法，由下面四个值组成。

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

h-shadow -----水平阴影的位置，允许负值 
v-shadow -----垂直阴影的位置，允许负值 
blur-----模糊的距离 （如果设置的是0，那么将和正常的文字清晰度一样）
color------阴影的颜色

跟padding等属性不一样，padding分left、right、top、bottom四个方向，逗号分隔开，最多可以写四次。

text-shadow没有限制，只要用逗号分隔开，写多少次都可以，可以用来实现有层次感的阴影，有层次感了才会显得更加真实。

2、具体实现

阴影属性，只要够亮，跟元素原本的颜色区分开来，那不就是发光效果了吗？

下面叠了6种阴影效果。

  color: #cce7f8;
  font-size: 2.5rem;
  font-family: 'Pacifico', cursive;
  text-transform: uppercase;
  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);
  

3、配合animation动画属性使用

实现闪烁的效果，其实就是利用animation属性，循环修改text-shaow属性的值，效果比较简单就不放动图。

.font-box {
  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 2px 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);
  }
}

4、其他情况

除了文本实现发光效果用text-shadow，其他元素实现发光效果，还可以选择box-shadow盒子阴影属性。

box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

inset 阴影类型为内阴影
outset 阴影类型为外阴影  （不添加时默认为外阴影，但是添加后反而会使得阴影无效，所以如果要想实现外阴影可以不加）
h-shadow----- 阴影的水平位移量 允许为负值
v-shadow----- 阴影垂直位移量 允许为负值
blur-----阴影模糊半径 即阴影向外模糊的模糊范围  值越大越模糊 ，正值
spread-----阴影延展半径，可为负值
color----- 阴影颜色，定义绘制阴影时所使用的颜色  

基本上用法和效果差不多，区别在于

1、语法区别：text-shadow?比?box-shadow?少支持了两个参数：inset/outset， spread；

2、阴影区别：阴影是否被切除，盒阴影box-shadow会被切除，但文本阴影text-shadow不会。

四、小结

text-shadow和box-shadow用得好了，可以丰富页面的层次感，建议还是多用用，不同的组合就能实现出各种各样好看的效果。

ps: 我是地霊殿__三無，希望能帮到你（让我水完这次的日更，就差几天了）。

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!