实现让字体图标旋转

最新推荐文章于 2022-08-28 10:26:43 发布

Ruby_.

最新推荐文章于 2022-08-28 10:26:43 发布

阅读量573

点赞数

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_45815294/article/details/116206869

版权

实现让字体图标旋转 transform:rotate()

 <style>
 		/*这里引入字体图标*/
        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?6c68li');
            src: url('../fonts/icomoon.eot?6c68li#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?6c68li') format('truetype'), url('fonts/icomoon.woff?6c68li') format('woff'), url('fonts/icomoon.svg?6c68li#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }    
        
        div {
            border: 1px solid black;
        }      
          
        /* 这里一定要把after伪元素转换成inline-block类型，
        默认类型(inline)不会旋转，block类型可以旋转，但有问题。
        还可以加上transition过渡*/
        div::after {
            content: '\e90e';
           	font-family: 'icomoon';
            display: inline-block;
            transition: all 0.5s;
        }
        
        /*这里实现悬停时让字体图标顺时针旋转180度*/
        div:hover::after {
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <div>
        我是div
    </div>
</body>

鼠标移入前

在这里插入图片描述

鼠标移入后

在这里插入图片描述

Ruby_.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现让字体图标旋转

实现让字体图标旋转 transform:rotate() <style> /*这里引入字体图标*/ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?6c68li'); src: url('../fonts/icomoon.eot?6c68li#iefix') format('embedded-opentype'),
复制链接

扫一扫