投稿 搜索

热门文章

当前位置: 站长天下 / Html5 CSS3 / 纯CSS3霓虹灯文字闪烁动画特效
纯CSS3霓虹灯文字闪烁动画特效
标签:

插件介绍

    这是一款纯css3绘制LED文字闪烁动画、霓虹灯文字动画特效。支持中文、英文字母效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-07
    阅读:

纯CSS3霓虹灯文字闪烁动画特效

简要教程

这是一款纯css3绘制LED文字闪烁动画、霓虹灯文字动画特效。支持中文、英文字母效果。

使用方法

直接在页面引入CSS3样式即可

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  margin: 0;
  display: flex;
  height: 100vh;
  background: #240041;
  font-family: Montserrat, sans-serif;
}
 
h1 {
  margin: auto;
  font-size: 20vw;
  text-align: center;
  text-transform: uppercase;
  color: #900048;
  white-space: nowrap;
  letter-spacing: -.15em;
}
 
span:nth-child(1) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(2) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
span:nth-child(3) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(4) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
span:nth-child(5) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(6) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
@keyframes blink {
  33% {
    color: #FF4057;
  }
  66% {
    color: #FF8260;
  }
}
</style>

Html结构

在页面引入以下html代码

<h1>
   <span>r</span>
   <span>u</span>
   <span>z</span>
   <span>w</span>
 
</h1>