![](/img/trans.png)
[英]Is there any way to insert some effects I found on codepen without altering my previous work?
[英]Spinning icons work in codepen, but not in browser
我正在玩代码来嵌入在悬停时旋转的社交网络图标。 我正在为一个项目调整它们,并且在这支笔上效果很好。 但是,当我将代码复制到Brackets中时,每当页面加载时,图标都不会显示,直到您将鼠标悬停在方框上。 有人知道我要去哪里错了吗?
的HTML
<section>
<ul id='services'>
<li>
<div class='entypo-facebook'></div>
</li>
<li>
<div class='entypo-twitter'></div>
</li>
<li>
<div class='entypo-gplus'></div>
</li>
<li>
<div class='entypo-linkedin'></div>
</li>
</ul>
</section>
的CSS
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
html, body {
margin: 0;
background-color: #ECF0F1;
}
section #services {
text-align: center;
transform: translatez(0);
}
section #services li {
width: 40px;
height: 40px;
display: inline-block;
margin: 20px;
list-style: none;
}
section #services li div {
width: 40px;
height: 40px;
color: #ECF0F1;
font-size: 1.2em;
text-align: center;
line-height: 40px;
background-color: #cccccc;
transition: all 1s ease;
}
section #services li div:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background-color: #303030;
}
您必须在transform
属性中设置前缀-webkit-
-moz-
等。
section #services li div:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-radius: 100px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.