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

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

一开始使用的是 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:

<p class=""></p>

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

<div id=""></div>

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

鼠标移上图标字体，让其旋转相关推荐

css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
CSS图片阴影+鼠标移上图片放大、变形
在做图片卡片列表的时候我们经常用到图片的呼吸灯效果,实现图片的阴影效果.放大.动态展示代码: li img { display: block; width: 140px; height: 140px ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...
js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
html鼠标出现下划线,鼠标移上链接出现下划线
核心提示:有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了. 有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了. ...
个人练习-jq 鼠标移上移出查看图片（放大）提示
只做了个简单的效果,以后可以加上动画等效果,实际效果如下: html 代码: <div class="wrap"><ul class="img_list ...
用jQuery一句话实现鼠标移上变色
按钮移上变色效果 <style> .round-corner-btn { -moz-border-radius:4px; -webkit-b ...
div自动滑动，鼠标移上停止滑动
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目.首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例,那 ...
【Angular】文本溢出鼠标移上去时显示全部的气泡卡片组件
在使用ng-zorro-antd的table时,发现并没有自带element那种单元格文本溢出显示,element的table设置这个show-overflow-tooltip就能轻松使用. 1.新建 ...

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

鼠标移上图标字体，让其旋转相关推荐

最新文章

热门文章