字体图标旋转时不晃动

Drumsticks

于 2020-12-30 10:50:24 发布

阅读量223

点赞数

分类专栏：实用代码文章标签： css html5

本文链接：https://blog.csdn.net/Drumsticks/article/details/111949086

版权

实用代码专栏收录该内容

10 篇文章 2 订阅

订阅专栏

案例使用了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>

Drumsticks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
字体图标旋转时不晃动

案例使用了glyphicon字体图标库，大同小异css部分：.glyphicon-refresh { font-size: 32px; animation: rotateFontIcon linear 1s infinite } @keyframes rotateFontIcon { from { -webkit-transform: rotate(0deg); transform: rotate(0deg);
复制链接

扫一扫