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