子比主题美化网站菜单图标旋转教程

美化 效果

教程

我们第一步将下面的代码放到：子比主题–>>自定义CSS样式

.figure{
    width: 15px;
    animation:0ms;
    -webkit-animation:rotateImg 3s linear infinite;
    vertical-align: middle;
  }
  @keyframes rotateImg {
    0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
  }
  @-webkit-keyframes rotateImg {
      0%{-webkit-transform : rotate(0deg);}
    100%{-webkit-transform : rotate(360deg);}
  }

然后我们再利用figure这个标签进行图标旋转，如下图，第一个箭头就是利用的标签，然后第二个箭头是你的图标代码！

图标代码

<svg class="figure"  aria-hidden="true"><use xlink:href="#icon-surface_gongju"></use></svg>

icon-surface_gongju改成你的图标就可以了！