CSS-DIV元素旋转动画（360度循环转圈）

CSS-DIV元素旋转动画（360度循环转圈）简单调用方便，通用性强。

CSS代码

@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}

使用

/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
*/
div{ width:80px; height:80px; text-align:center; background:red}
.run { animation: rotate 1s linear infinite; }

html

<div class="run">旋转内容</div>

本文胡金金个人网站2023年10月25日整理发布

转载注明:http://m.hujinjin.com/info/17379.html