Comment utiliser CSS3 pour créer une animation de texte sous un éclairage lumineux-tutoriel CSS-php.cn

Comment utiliser CSS3 pour créer une animation de texte sous un éclairage lumineux

php中世界最好的语言

Libérer： 2017-11-25 10:10:58

original

2776 Les gens l'ont consulté

Parfois, nous devons créer un effet spécial, utiliser la lumière pour éclairer, puis afficher une animation de texte, nous vous apporterons donc aujourd'hui le code source de l'éclairage pour afficher une animation de texte

<!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;}   
}

Copier après la connexion

Lumière pour illuminate display C'est tout pour le code source de l'animation de texte. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Comment créer les effets spéciaux de la commutation d'image de mise au point plein écran adaptative CSS3

Plusieurs sélecteurs couramment utilisés dans CSS3

Quels sont les nouveaux attributs d'arrière-plan en CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!