封面：
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科比24&8</title>
<link rel="stylesheet" href="css/5-23.css">
</head>
<body>
<h1>
<span class="num24">24</span>
<span class="num8">8</span>
</h1>
<h1>
<span>科</span>
<span>比</span>
<span>·</span>
<span>布</span>
<span>萊</span>
<span>恩</span>
<span>特</span>
<span>.</span>
<span>.</span>
<span>.</span>
</h1>
</body>
</html>
css部分：
* {
margin: 0;
padding: 0;
/* font-family: '微軟雅黑'; */
font-weight: 400;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #4528a6;
}
h1 span {
position: relative;
/* 無限做線性動畫 */
/* color: purple; */
animation: animate 4s linear infinite;
}
.num24 {
position: absolute;
top: 28%;
left: 45%;
font-size: 100px;
}
.num8 {
position: absolute;
top: 53%;
left: 47%;
font-size: 100px;
}
h1 span:nth-child(0) {
animation-delay: 0s;
}
h1 span:nth-child(1) {
animation-delay: 0.1s;
}
h1 span:nth-child(2) {
animation-delay: 0.2s;
}
h1 span:nth-child(3) {
animation-delay: 0.3s;
}
h1 span:nth-child(4) {
animation-delay: 0.4s;
}
h1 span:nth-child(5) {
animation-delay: 0.5s;
}
h1 span:nth-child(6) {
animation-delay: 0.6s;
}
h1 span:nth-child(7) {
animation-delay: 0.7s;
}
h1 span:nth-child(8) {
animation-delay: 0.8s;
}
h1 span:nth-child(9) {
animation-delay: 0.9s;
}
@keyframes animate {
0%,
100% {
color: rgb(228, 224, 15);
filter: blur(2px);
text-shadow: 0 0 10px #f7e34f, 0 0 20px #f7e34f, 0 0 30px #f7e34f, 0 0 40px #f7e34f, 0 0 60px #f7e34f, 0 0 100px #f7e34f;
}
25%,
75% {
color: #4528a6;
filter: blur(0px);
text-shadow: none;
}
}
2：
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KoBe·Bryant</title>
<link href="https://fonts.font.im/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="css/5-22.css">
</head>
<body>
<div class="top">
<div class="top-text">KoBe·Bryant</div>
<div class="top-by">by @Chen</div>
</div>
</body>
</html>
css部分：
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #000;
}
.top {
position: absolute;
top: 50%;
left: 50%;
border-top: 1px dashed #f7e34f;
transform: translate(-50%, -50%);
color: #f7e34f;
text-align: center;
}
.top span {
display: inline-block;
}
.top-text {
font-family: 'Indie Flower', cursive;
/* font-family: 'Monoton', cursive; */
font-size: 95px;
color: #f7e34f;
/* text-shadow: -3px 0 20px #f7e34f, -3px 0 10px #f7e34f, -3px 0 40px #f7e34f; */
animation: kobe 4s infinite;
}
.top-by {
font-family: 'Indie Flower', cursive;
text-shadow: -3px 0 6px #f7e34f, -3px 0 10px #f7e34f, -10px 0 10px #f7e34f;
}
@keyframes kobe {
0%,
30%,
32%,
34% {
color: #222;
text-shadow: -3px 0 20px #222, -3px 0 10px #222, -3px 0 40px #222;
;
}
31%,
33%,
35%,
100% {
color: #f7e34f;
text-shadow: -3px 0 20px #f7e34f, -3px 0 10px #f7e34f, -3px 0 40px #f7e34f;
}
}
分享