利用纯css3实现的文字亮光特效的代码演示

2020-05-02 08:08:47易采站长站整理

  top: 0;   
  z-index: -1;   
}   
  
.inner-shiny::after, .inner-shiny::before   
{   
        -webkit-animation: sparkle 5s infinite;   
  -webkit-animation-timing-function: linear;   
    background: #FFF;   
  border-radius: 100%;   
  box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;   
  content: "";   
  display: block;   
  height: 10px;   
  opacity: 0.7;   
  position: absolute;   
  width: 10px;   
}   
  
.inner-shiny::before   
{   
    -webkit-animation-delay: 0.2s;   
  height: 7px;   
  left: 0.12em;   
  top: 0.8em;   
  width: 7px;   
}   
  
.inner-shiny::after   
{   
  top: 0.32em;   
  rightright: -5px;   
}   
  
@-webkit-keyframes flare   
{   
  0%   { background-position: -180px; }   
  30%  { background-position: 500px; }   
  100% { background-position: 500px; }   
}   
  
@-webkit-keyframes sparkle   
{   
  0%   { opacity: 0; }   
  30%  { opacity: 0; }   
  40%  { opacity: 0.8; }   
  60%  { opacity: 0; }   
  100% { opacity: 0; }   
}  

  以上就是css3实现的文字亮光特效的全部代码,制作起来很简单,看完以后希望大家能学习制作,谢谢阅读,希望能帮到大家,请继续关注软件开发网,我们会努力分享更多优秀的文章。