1、旋转
<div id="loading">旋转起来</div>
<style>
#loading{
width:100px;
height:100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background:red;
animation: rotating 2s linear infinite;
}
@keyframes rotating{
from{ //动画开始时对于的样式
transform: rotate(0deg);
}
to{ // 动画结束时对应的样式
transform: rotate(360deg);
}
}
</style>
2、缩放
<div id="scale">大小变起来</div>
<style>
#scale{
width:100px;
height:100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background:red;
animation: scale 2s linear infinite;
}
@keyframes scale{
0%{ // 动画开始样式
transform: scaleZ(1);
}
50%{ // 动画中间样式,可自定义中间样式,修改百分比即可
transform: scale(2);
}
100%{ //动画结束样式
transform: scale(1);
}
}
</style>