字体图标实现旋转效果

iconfont图标字体如何实现旋转效果？

一、给要旋转的元素添加class属性

        
"iconfont icon-yanwubaojingqi xz">风力：0m/s
        
"el-icon-s-flag">风向：东北偏北
        
"el-icon-sunny">光照强度：0m/s
        
"el-icon-odometer">大气压强：110kPA
        
"el-icon-stopwatch">空气温度：1.7℃
        
"el-icon-partly-cloudy">空气湿度：75.2%
        
"el-icon-heavy-rain">降雨 0mm
        
"iconfont icon-lishijilu">采集时间：3号17:00
    

给要旋转的i标签添加一个类，赋予其animation的效果。

.xz {
  animation: move 1.2s linear infinite;
  -webkit-animation: move 1.2s linear infinite;
  display: inline-block;
}
@keyframes move {
  100% {
    transform: rotate(360deg);
  }
}

要注意的是，需要将i标签转为行内块元素，才可以正常旋转。