}
@keyframes name{
from{}
10%{transform: rotate(30deg) scale(1.5);}
20%{transform: rotate(60deg) scale(2);}
30%{transform: rotate(30deg) scale(.8);}
40%{transform: rotate(-30deg) scale(1.5);}
50%{transform: rotate(-60deg) scale(2);}
60%{transform: rotate(-90deg) scale(2.5);}
70%{transform: rotate(-30deg) scale(1.5);}
80%{transform: rotate(30deg) scale(.8);}
90%{transform: rotate(60deg) scale(1.5);}
to{transform: rotate(90deg) scale(2.5);}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
然后我们就可以看到这个心❤跳起来了
如果想让它跳的更激动，这里缩放旋转我都是随便写的，我们可以让0%-100%间设置更多，旋转缩放设置更夸张些，动画完成的时间设置再短一些
这个动画基础也快结束了，后面可以直接来上手写一些网页带大家看一下。