html - css 悬停动画在 icomoon 中不起作用
问题描述
我有带有 css3 悬停动画(toTopFromBottom
)的菜单。现在我需要将 fontawesome 图标更改为 icomoon 图标并添加此效果:
HTML:
<div id="top-bar" class="top-bar">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="social-icons social-icons-colored-hover">
<ul>
<li class="social-facebook"><a href="#"><i class="icon-mug"></i></a></li>
<li class="social-twitter"><a href="#"><i class="icon-rocket"></i></a></li>
<li class="social-google"><a href="#"><i class="icon-paint-format"></i></a></li>
<li class="social-vimeo"><a href="#"><i class="icon-pencil"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
#top-bar .social-icons {
float: right;
height: 100%;
overflow: hidden;
}
#top-bar .social-icons li,
#top-bar .social-icons li a {
float: left;
list-style: outside none none;
}
#top-bar .social-icons li a {
border-radius: 0px;
border-right: 1px solid rgba(180, 180, 180, 0.2);
font-size: 15px;
height: 40px;
line-height: 40px;
text-align: center;
width: 35px;
overflow: hidden;
margin: 0;
}
#top-bar .social-icons li:first-child a {
border-left: 1px solid rgba(180, 180, 180, 0.2);
}
.social-icons ul {
padding: 0;
}
.text-center.social-icons ul {
display: inline-block;
}
.social-icons li {
float: left;
list-style: none;
}
.social-icons li a {
float: left;
height: 32px;
width: 32px;
line-height: 32px;
font-size: 16px;
text-align: center;
margin: 0 8px 8px 0;
border-radius: 4px;
border: 0;
background: transparent;
color: #565b73;
overflow: hidden;
}
/*Colored*/
.social-icons.social-icons-colored a,
.social-icons.social-icons-colored-hover a:hover {
color: #fff;
border: 0;
}
.social-icons.social-icons-colored .social-facebook a,
.social-icons.social-icons-colored-hover .social-facebook a:hover {
background-color: #5d82d1;
}
.social-icons.social-icons-colored .social-twitter a,
.social-icons.social-icons-colored-hover .social-twitter a:hover {
background-color: #40bff5;
}
.social-icons.social-icons-colored .social-vimeo a,
.social-icons.social-icons-colored-hover .social-vimeo a:hover {
background-color: #35c6ea;
}
.social-icons.social-icons-colored .social-google a,
.social-icons.social-icons-colored-hover .social-google a:hover {
background-color: #eb5e4c;
}
/* Border */
.social-icons.social-icons-border li a {
border: 1px solid #eee;
background: transparent;
color: #333;
}
.social-icons:not(.social-icons-colored):not(.social-icons-colored-hover)
li
a:hover {
background-color: #eee;
}
.social-icons li:hover i {
-webkit-animation: toTopFromBottom 0.3s forwards;
-moz-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
}
@-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform: translateY(-100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toTopFromBottom {
49% {
-moz-transform: translateY(-100%);
}
50% {
opacity: 0;
-moz-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@keyframes toTopFromBottom {
49% {
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
51% {
opacity: 1;
}
}
但在行动中,css 效果不适用于 icomoon。
解决方案
尝试display: inline-block
[class^="icon-"],
[class*=" icon-"] {
display: inline-block
font-family: "icomoon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
推荐阅读
- javascript - Tensorflow.js tf.browser.fromPixels() 必须是 HTMLVideoElement
- javascript - 网页抓取时如何获取 HTML 代码而不是源代码?
- reactjs - react如何在不同组件中使用axios实例?
- javascript - 如何将字符串数组转换为嵌套的 JSON 对象?
- mysql - 来自 django ORM 的单个对象值
- asp.net-mvc - 状态服务器日志事件 ID 1078 状态服务器已关闭过期的 TCP/IP 连接
- r - 保留一个圆形划分的新列
- javascript - React 应用程序、http-proxy-middleware 和 axios 代理到后端服务器(生产和开发)
- javascript - 在 Javascript 中查找多个数组之间的差异
- jquery - TypeError:无法读取 Vue.js 中 foreach 内未定义的属性“详细信息”