Fancy Neon Text Effects with CSS3

你想要创建的霓虹灯效果吗? 没有? 嗯… 坏我将解释如何创建它们。霓虹灯文本主要是通过使用CSS3 proporty“文本阴影”在多个层和饱和的颜色,以及一些动画看起来更真实。

这是基本的HTML,我们将使用。没想到在这看到。

    
<html>
  <head>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <h1 class="neon">Neon Text</h1>
    </div>
  </body>
</html>

现在我们去很酷的东西:CSS !

最重要的部分是“文本阴影”——我们不会用它来一个实际的影子但对文本的发光效果。每一行的值代表一个发光的半径(即第一行创建发光10 px半径)。在大多数情况下我们希望内心的阴影是一个光明的版本的甚至是白色,而出的霓虹颜色。

    
body{
  background-color:#424242;
}
.neon{
  text-align:center;
  font-size:40px;
  margin:20px 0 20px 0;
  color:#ffffff;
  /*Glow*/
  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;
}

如果我们想要,我们还可以激活这个!

我们想用一个“动画”属性的发光效果,不要忘记你的前缀“webkit -”和“-moz——”!现在其关键帧动画仍然需要工作

    
.neon{
  text-align:center;
  font-size:40px;
  margin:20px 0 20px 0;
  color:#ffffff;
  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;
  /*Animation*/
  -webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate;
  -moz-animation: neonAnimation 1.5s ease-in-out infinite alternate;
  animation: neonAnimation 1.5s ease-in-out infinite alternate;   
}

的关键帧,我们需要再次使用前缀,像这样:

    
      /*Webkit prefix*/
      @-webkit-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }
      
      
      /*Moz prefix*/
      @-moz-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }
      
      /*No prefix*/
      @keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                0 0 10px #ffffff,
                0 0 15px #ffffff,
                0 0 20px #228DFF,
                0 0 35px #228DFF,
                0 0 40px #228DFF,
                0 0 50px #228DFF,
                0 0 75px #228DFF;
  }
}

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。