字体图标旋转时不晃动

案例使用了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>
上一篇:LeetCode - Medium - 48. Rotate Image


下一篇:css3系列之transform 详解scale