<img src="" />
添加css
img{ width:400px;height:auto; animation: heart 0.5s infinite; }
/*animation:动画名称 消耗时间 运动曲线 开始时间 播放次数 是否添加反方向*/
1.变化大小
@keyframes heart{
0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}
2.移动/颜色变化
@keyframes move{
from{left:0;background:red;}
to{left:1000px;background-color:yellow;}
}
3.旋转
@keyframes rotate{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}