熒光效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/5-29.css">
</head>
<body>
<div class="KOBE">
<span>K</span>
<span>O</span>
<span>B</span>
<span>E</span>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(172, 31, 153);
}
.demo {
background: #2c2c54;
}
.KOBE {
color: yellow;
font-family: 'Monoton', cursive;
font-size: 100px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
margin: 300px auto;
display: block;
}
.KOBE span {
animation: animate linear 2000ms infinite;
}
.KOBE span:nth-child(1n) {
animation-delay: 0s;
}
.KOBE span:nth-child(2n) {
animation-delay: 100ms;
}
.KOBE span:nth-child(3n) {
animation-delay: 200ms;
}
.KOBE span:nth-child(4n) {
animation-delay: 300ms;
}
.KOBE span:nth-child(5n) {
animation-delay: 400ms;
}
.KOBE span:nth-child(6n) {
animation-delay: 500ms;
}
.KOBE span:nth-child(7n) {
animation-delay: 600ms;
}
.KOBE span:nth-child(8n) {
animation-delay: 700ms;
}
.KOBE span:nth-child(9n) {
animation-delay: 800ms;
}
.KOBE span:nth-child(10n) {
animation-delay: 900ms;
}
@keyframes animate {
0% {
opacity: 0.3;
}
100% {
opacity: 1;
text-shadow: 0 0 80px white, 0 0 30px skyblue, 0 0 6px #ffea00;
}
}
@media only screen and (max-width: 990px) {
.KOBE {
font-size: 65px;
}
}
@media only screen and (max-width: 767px) {
.KOBE {
font-size: 50px;
}
}
@media only screen and (max-width: 479px) {
.KOBE {
font-size: 36px;
}
}
@media only screen and (max-width: 359px) {
.KOBE {
font-size: 27px;
}
}
不定時更新