How to use CSS3 to create text animation under light illumination-CSS Tutorial-php.cn

How to use CSS3 to create text animation under light illumination

php中世界最好的语言

Release： 2017-11-25 10:10:58

Original

2827 people have browsed it

Sometimes we need to do such a special effect, use light to illuminate, and then display text animation, so today we will bring you the source code of lighting to display text animation

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS3 实现灯光照射显示文字动画</title>
<meta name="keywords" content=" CSS3 实现灯光照射显示文字动画" />
<meta name="description" content=" CSS3 实现灯光照射显示文字动画" />
 
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
  <div>
  <div>
    <p>5iweb.com.cn</p>
  </div>
  <div class="noor one"></div>
  <div class="noor two"></div>
</div>
 
 
</body>
</html>
Css部分：
body {background: #000;}
 
.content {position: relative;width: 750px;margin: 0 auto;}
 
p {margin: 0;padding: 0;font-size: 90px; }
 
.klam {
  position: absolute;
  top: 40px;
  left: 100px;
  color: #000;
  z-index: 1;
  animation: shadow 5.0s ease-in-out infinite;
}
 
.noor {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background:
      -webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px #fff;
    animation: noor 5.0s ease-in-out infinite;
}
 
.two {z-index: 2;opacity: 0.8;}
 
@-webkit-keyframes noor {
    0% {left: 45px;}
    50% {left: 335px;}
    75%{left:500px;}
    100% {left: 45px;}
}
 
@-webkit-keyframes shadow {
  0% {text-shadow: -9px 1px 4px #000;}
  50% {text-shadow: 9px 1px 4px #000; }
  100% {text-shadow: -9px 1px 4px #000;}   
}

Copy after login

Light to illuminate to display text animation That’s it for the source code. For more exciting information, please pay attention to other related articles on the php Chinese website!