Maison >interface Web >tutoriel CSS >Comment utiliser CSS3 pour créer une animation de texte sous un éclairage lumineux
Comment utiliser CSS3 pour créer une animation de texte sous un éclairage lumineux
- php中世界最好的语言original
- 2017-11-25 10:10:582850parcourir
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;}
}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 :
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!