div{
transform: rotate(45deg);
position: relative;
width: 200px;
height: 200px;
background: red;
margin: 15% auto;
animation: jump 1.5s linear infinite;
}
div::after{
content: '';
display: block;
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
position: absolute;
top: 0;
left: -100px;
}
div::before{
content: '';
display: block;
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
position: absolute;
top: -100px;
right: -0px;
}
@keyframes jump{
0%{
transform: rotate(45deg) scale(1);
}
30%{
transform:rotate(45deg) scale(1.5);
}
60%{
transform:rotate(45deg) scale(1);
}
100%{
transform:rotate(45deg) cale(0.8);
}
}
先写一个div,之后再写样式
animation: jump 1.5s linear infinite;(设置动画的名字、执行时间、时间变化速度和循环次数)
@keyframes jump里面写在不同时间段变化的样式