鼠标移上图标字体，让其旋转-白红宇

鼠标移上图标字体，让其旋转

阅读量：4316 次

发布时间：2019-06-06

本文共 1373 字，大约阅读时间需要 4 分钟。

效果：容器内放置了一个图标字体，当鼠标移至容器时，让图标字体旋转角度。

一开始使用的是 bootstrap 的图标字体，它需要添加 2 个类，才能让图标正常显示，通过伪元素 ::before 添加2个类的内容，显然比较麻烦，所以，换了 icomoon 自己定制的图标字体，发现还是不行，于是才发现问题出在代码层面。需要将图标字体脱离文档流，无论是定位还是浮动，脱离即可。（目前只实践出是由于这个问题）

实现过程：

1、为容器添加伪元素 ::before ，使其通过 ::before 添加图标字体 content: "\e114" (伪元素必须添加 content 属性，否则不会生效)；

2、通过 :hover::before 实现当鼠标移至容器时，对 ::before 所操控的图标字体进行旋转角度 transform:rotate(180deg) （旋转角度值可自定义）；

3、重点：为 ::before 添加定位或浮动；

4、添加 transition: all .5s 只是为了旋转时有动画；

1、使用 bootstrap 图标字体：

html:

css:

p {
       width: 100px;    height: 100px;    border: 1px solid red;    position: relative;    top: 1px;    display: inline-block;    font-family: 'Glyphicons Halflings';    font-style: normal;    font-weight: 400;    line-height: 1;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}p::before {
       content: "\e114";    position: absolute;/* 一开始未设置定位，无法使其旋转 */    transition: all .5s;}p:hover::before {
       transform: rotate(180deg) scale(.75,.75);}

2、使用定制的 icomoon 图标字体：

html

css:

div {
       margin: 100px;    width: 100px;    height: 100px;    border: 1px solid #000000;    font-family: 'icomoon';}div::before {
       content: "\e91c";    position: absolute;    transition: all 0.5s;}div:hover::before {
       color: red;    transform: rotate(180deg);}

以上便是发现问题及解决问题的过程，如有不当，欢迎指正！（*＾-＾*）

转载于:https://www.cnblogs.com/JaneBlog/p/11222169.html

你可能感兴趣的文章