其他分享
首页 > 其他分享> > 字体图标旋转时不晃动

字体图标旋转时不晃动

作者：互联网

案例使用了glyphicon字体图标库，大同小异

css部分：

.glyphicon-refresh {
        font-size: 32px;
        animation: rotateFontIcon linear 1s infinite
    }
    
@keyframes rotateFontIcon {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

html部分:

<!DOCTYPE html>
<html>
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello</title>
</head>
<body>
	<span class="glyphicon glyphicon-refresh"></span>
</body>
</html>

标签：glyphicon,rotate,0deg,transform,rotateFontIcon,晃动,字体,webkit,图标
来源： https://blog.csdn.net/Drumsticks/article/details/111949086