运动气泡
代码：
ul li:nth-child(1){
background-color: #ADFF2F;
animation: name 1s infinite;
}
ul li:nth-child(2){
background-color: aquamarine;
animation:name 1s 0.7s linear infinite;
}
ul li:nth-child(3){
background-color: bisque;
animation:name 1s 0.9s linear infinite;
}
ul li:nth-child(4){
background-color: chocolate;
animation:name 1s 1.1s linear infinite;
}
@keyframes name{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(20px);
}
75%{
transform: translateY(-20px);
}
100%{
transform: translateY(0px);
}
}
呼吸效果： 变大变小
.breathe:nth-child(1){
animation: size 1s infinite;
}
.breathe:nth-child(2){
background-color: #2e8cff;
animation: size 1s 0.7s linear infinite;
}
@keyframes size {
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
