<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS3荧光灯文字闪烁动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.text-effect {
background: #2c2c54;
color: #fff;
font-family: "Monoton", cursive;
font-size: 100px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
display: block;
position: relative;
}
.text-effect span {
animation: animate linear 2000ms infinite;
}
.text-effect span:nth-child(1n) {
animation-delay: 0s;
}
.text-effect span:nth-child(2n) {
animation-delay: 100ms;
}
.text-effect span:nth-child(3n) {
animation-delay: 200ms;
}
.text-effect span:nth-child(4n) {
animation-delay: 300ms;
}
.text-effect span:nth-child(5n) {
animation-delay: 400ms;
}
.text-effect span:nth-child(6n) {
animation-delay: 500ms;
}
.text-effect span:nth-child(7n) {
animation-delay: 600ms;
}
.text-effect span:nth-child(8n) {
animation-delay: 700ms;
}
.text-effect span:nth-child(9n) {
animation-delay: 800ms;
}
.text-effect span:nth-child(10n) {
animation-delay: 900ms;
}
@keyframes animate {
0% {
opacity: 0.3;
}
100% {
opacity: 1;
text-shadow: 0 0 80px Red, 0 0 30px orange, 0 0 6px DarkRed;
}
}
@media only screen and (max-width: 990px) {
.text-effect {
font-size: 65px;
}
}
@media only screen and (max-width: 767px) {
.text-effect {
font-size: 50px;
}
}
@media only screen and (max-width: 479px) {
.text-effect {
font-size: 36px;
}
}
@media only screen and (max-width: 359px) {
.text-effect {
font-size: 27px;
}
}
</style>
</head>
<body>
<div class="text-effect">
<span>闪</span>
<span>光</span>
<span>文</span>
<span>字</span>
<span>展</span>
<span>示</span>
</div>
</body>
</html>
CSS3荧光灯文字闪烁动画
于 2023-02-16 14:24:56 首次发布