阿里巴巴矢量库图标 transform 旋转的解决方法。

发布时间:2019-09-29作者:laosun阅读(1172)

阿里巴巴矢量库图标

    经过测试 transform 属性的内容运用在 iconfont 图标上都是无效的


    原因:

    查参考手册,transform适用于:所有块级元素及某些内联元素

    A transformable element is an element in one of these categories:
    an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
    an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform[SVG11].

    解决方案:

    既然 transform 不适用于某些内联元素,那咱们就把这些元素变成 inline-block 或 block 就行了。


    案例demo:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Iconfont-阿里巴巴矢量图标库</title>
    </head>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1440724_ykn3drloyzp.css">
    <style>
    .iconfont{
        display: inline-block
     }
     .iconfont.loadingstyle{
      color:red;
      font-size: 40px;
     }
     .if-spin {
      width: 40px;
      -webkit-animation: if-spin 2s infinite linear;
      animation: if-spin 2s infinite linear;
    }
    .if-pulse {
      -webkit-animation: if-spin 1s infinite steps(8);
      animation: if-spin 1s infinite steps(8);
    }
    @-webkit-keyframes if-spin {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }
    @keyframes if-spin {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }
    </style>
    <body>
    <i class="iconfont if-spin iconloading loadingstyle "></i>
    </body>
    </html>


6 +1

版权声明

 前端  开源

 请文明留言

1 条评论