技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

3个使用CSS创建的霓虹灯效果/发光效果文本

作者:admin    时间:2021-6-28 14:33:14    浏览:

霓虹灯文本可以为网站添加美感,本文介绍如何使用CSS创建霓虹灯效果的文本,在本文中,我们将看看如何为文本添加发光效果。

霓虹灯文本
霓虹灯文本

为文本添加发光效果

首先,我们让文字发光,这可以在带有text-shadow属性的CSS中完成,我们可以巧妙地通过逗号分隔它们来应用多个阴影:

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

text-shadow需要四个值,前两个分别代表阴影的水平和垂直位置,第三个值表示模糊半径的大小,而最后一个值表示阴影的颜色。为了增加发光效果的大小,我们将增加第三个值,它代表模糊半径。或者,用另一种方式表达:

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

这是我们用那一点点CSS得到的效果:

 发光字体
发光字体

CSS

.neonText {
  color: #fff;
  text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      0 0 82px #0fa,
      0 0 92px #0fa,
      0 0 102px #0fa,
      0 0 151px #0fa;
}

/* Additional styling */
  
body {
  font-size: 18px;
  font-family: "Vibur", sans-serif;
  background-color: #010a01;
}  

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
  
h1 {
    font-size: 4.2rem;
}
  
h2 {
    font-size: 1.8rem;
}

.container {
  margin-top: 20vh;
}

HTML

<div class="container">
    <h1 class="neonText">
          404
    </h1>
    <h2 class="neonText">Page Not Found</h2> 
</div>

execcodegetcode

你可能想知道这是怎样得到的,首先,我们在文本的外边缘添加了白色发光效果,并具有较小的模糊半径。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
}

最后五个值是形成绿色光晕的较大模糊半径的较宽文本阴影。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

如果我们能用少于五个阴影来实现这一点就好了,但我们需要所有这些阴影,以便它们可以相互堆叠以增加发光的深度。如果我们使用单个text-shadow代替,效果将不会具有使其看起来逼真所需的深度。

继续尝试各种色调和颜色以及模糊半径大小!你可以制作各种各样的炫酷发光效果,因此请尝试不同的变化——你甚至可以混合一种颜色与另一种颜色混合的颜色。

“闪烁”效果

关于霓虹灯“闪烁”效果,我们可以用CSS动画做同样的事情!我们用@keyframes来制作一个动画,以快速、看似随机的闪光来打开和关闭灯光。

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

我们采用了与text-shadow之前完全相同的属性和值,将它们包装在一个@keyframes名为的动画flicker中,并在时间轴中选择点来应用阴影,以及完全去除阴影的点。

剩下的就是在我们希望灯光闪烁的地方调用动画。在这种特殊情况下,我们只将它添加到<h1>元素中。

h1 {
  animation: flicker 1.5s infinite alternate;     
}

效果

“闪烁”效果
“闪烁”效果

CSS

.neonText {
  animation: flicker 1.5s infinite alternate;
  color: #fff;
}

h1 {
  font-size: 4.2rem;    
}

/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}


/* Additional styling */
  
h2 {
 font-size: 1.8rem;
}
.container {
  margin-top: 20vh;
}

body {
  font-size: 18px;
  font-family: "Helvetica Neue", sans-serif;
  background-color: #010a01;
}  

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

HTML

<div class="container">
    <h1 class="neonText">
          404
    </h1>
    <h2 class="neonText">Page Not Found</h2> 
</div>

execcodegetcode

添加边框

通过给边框添加阴影,我们可以给它和文本一样的霓虹灯效果!

无论是文本容器的元素是什么,都需要边框。假设我们只使用一个<h1>元素,这就是我们获得的边框。我们调用border 属性在标题周围制作一个纯白色边框,加上一点填充来给文本边距空间:

h1 {
  border: 0.2rem solid #fff;
  padding: 0.4em;
}

我们可以通过border-radius将边框的角稍微圆润一点,这样边框就不会那么尖锐了。你可以使用最适合你的任何值来获得你想要的精确圆度。

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
}

最后一块是发光!现在,text-shadow不适用于这里的边框,但这没关系,因为这就是该box-shadow属性的设计目的。语法非常相似,因此我们甚至可以准确地提取我们所拥有的text-shadow内容并稍微调整值:

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #bc13fe,
              0 0 0.8rem #bc13fe,
              0 0 2.8rem #bc13fe,
              inset 0 0 1.3rem #bc13fe;
}

注意到那个inset关键字了吗?这是text-shadow无法做到的,但是将它添加到边框,box-shadow可以让我们在边框的两侧获得一些光晕以获得一些逼真的深度。

增加边框
增加边框

CSS

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #bc13fe,
    0 0 82px #bc13fe,
    0 0 92px #bc13fe,
    0 0 102px #bc13fe,
    0 0 151px #bc13fe;
}
  
body {
  font-size: 18px;
  font-family: "Sacramento", sans-serif;
  background-color: #010a01;
  display: flex;
  justify-content: center;
  align-items: center;  
}  

h1, h2 {
  text-align: center;
  font-weight: 400;
}
  
h1 {
  font-size: 6.2rem;
  animation: pulsate 1.5s infinite alternate;  
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #bc13fe,
            0 0 0.8rem #bc13fe,
            0 0 2.8rem #bc13fe,
            inset 0 0 1.3rem #bc13fe; 
}

@keyframes pulsate {
    
  100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #bc13fe,
      0 0 80px #bc13fe,
      0 0 90px #bc13fe,
      0 0 100px #bc13fe,
      0 0 150px #bc13fe;
  
  }
  
  0% {

    text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #bc13fe,
    0 0 45px #bc13fe,
    0 0 55px #bc13fe,
    0 0 70px #bc13fe,
    0 0 80px #bc13fe;

}

HTML

<h1 class="neonText">
 neon lights
</h1>

execcodegetcode

 

标签: css  css3  霓虹灯文本  发光文本  
x
x
  • 站长推荐