前言
由于
Gif
图片过小的问题,显得很不流畅,真实情况下很流畅,放心。
实现一个360°
无限循环旋转的动画,如下图所示:
示例代码
注意:通过
animation
复合属性,可控制动画旋转速度及其他参数。
以下代码可直接复制,运行即可查看效果。
<imageclass="come"src="https://img-/2c897a5f56dd4f169700660594e45902.png"/>
/* 执行动画 */.come{width: 100px;height: 100px;animation: rotate 5s linear infinite;}/* 360°旋转动画 */@keyframes rotate{/* 需要兼容的自行补入噢 */0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
图片资源
以下即为示例的图片资源,可另存为本地~