动态爱心效果
:nth-child()
-
:nth-child(n)选择器匹配属于父元素的第N个子元素,无论元素的类型
-
n可以是数字,关键字(odd/even),或者公式(an+b)[a:周期的长度,b:偏移值]
-
选择前几个,使用负方向 :nth-child(-n+a)选择前a个
-
选择后几个,使用正方向 :nth-child(n+b)选择后b个
-
两者结合使用,选择某一范围 :nth-child(-n+a):nth-child(n+b):从第a个选到第b个
-
选择倒数第n个,:nth-last-child(n)
选择列表中的倒数第n个标签 n为数字
:nth-last-child(n)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱心</title>
<link rel="stylesheet" href="day_7.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000;
}
ul {
position: relative;
display: flex;
height: 200px;
}
ul::after {
content: "爱心";
position: absolute;
top: 0;
left: 50%;
color: darkturquoise;
font-size: 30px;
font-weight: 700;
transform: translate(-50%, -700%);
}
li {
width: 20px;
height: 20px;
border-radius: 10px;
margin: 0 10px;
}
li:nth-child(1) {
background-color: red;
animation:love1 5s 0s infinite;
}
li:nth-child(2) {
background-color: darkturquoise;
animation:love2 5s 0.2s infinite;
}
li:nth-child(3) {
background-color: darksalmon;
animation:love3 5s 0.4s infinite;
}
li:nth-child(4) {
background-color: deeppink;
animation:love4 5s 0.6s infinite;
}
li:nth-child(5) {
background-color: yellow;
animation:love5 5s 0.8s infinite;
}
li:nth-child(6) {
background-color: deeppink;
animation:love4 5s 1s infinite;
}
li:nth-child(7) {
background-color: darksalmon;
animation:love3 5s 1.2s infinite;
}
li:nth-child(8) {
background-color: darkturquoise;
animation:love2 5s 1.4s infinite;
}
li:nth-child(9) {
background-color: red;
animation:love1 5s 1.6s infinite;
}
@keyframes love1{
30%,50%{
height:60px;
transform:translateY(-30px);
}
70%,100%{
height:20px;
transform:translateY(0);
}
}
@keyframes love2{
30%,50%{
height:125px;
transform:translateY(-60px);
}
70%,100%{
height:20px;
transform:translateY(0);
}
}
@keyframes love3{
30%,50%{
height:160px;
transform:translateY(-75px);
}
70%,100%{
height:20px;
transform:translateY(0);
}
}
@keyframes love4{
30%,50%{
height:180px;
transform:translateY(-60px);
}
70%,100%{
height:20px;
transform:translateY(0);
}
}
@keyframes love5{
30%,50%{
height:200px;
transform:translateY(-45px);
}
70%,100%{
height:20px;
transform:translateY(0);
}
}