发布时间:2019-09-29作者:laosun阅读(3053)
经过测试 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>
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/f9e137a04f994a6c9cb630de494af015.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。