css 实现旋转-风车
in HTML&CSS前端 with 0 comment

css 实现旋转-风车

in HTML&CSS前端 with 0 comment

1. 放置风车图片

<img src="http://sylblog.xin/usr/uploads/2018/04/119099866.gif" alt="小风车">

2. css

@keyframes rotating {
       from{
           transform: rotate(0);
       }
       to{
           transform: rotate(360deg);
       }
 }
 img{
       animation: rotating 1.2s linear infinite
 }

linear:匀速
infinite表示无限次循环动画

效果 (录制jif,原效果平滑)
fengche.gif

Responses