So erstellen Sie mit CSS3 Textanimationen unter Lichtbeleuchtung-CSS-Tutorial-php.cn

So erstellen Sie mit CSS3 Textanimationen unter Lichtbeleuchtung

php中世界最好的语言

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

Original

2785 Leute haben es durchsucht

Manchmal müssen wir einen solchen Spezialeffekt machen, Licht zum Beleuchten verwenden und dann eine Textanimation anzeigen. Deshalb bringen wir Ihnen heute den Quellcode der Beleuchtung, um eine Textanimation anzuzeigen

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

Nach dem Login kopieren

Licht an display Das ist alles für den Quellcode der Textanimation. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erzielen Sie die Spezialeffekte der adaptiven CSS3-Fokuskartenumschaltung im Vollbildmodus

Mehrere häufig verwendete Selektoren in CSS3

Was sind die neuen Hintergrundattribute in CSS3

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS3 Textanimationen unter Lichtbeleuchtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!