跨浏览器/缩放响应Hover效应
跨浏览器/缩放响应Hover效应
提问于 2015-09-21 19:08:28
我想使用悬停效果，如本教程中的效果，但令我失望的是，这种效果并没有有效地发挥作用。在不同的缩放级别和Firefox中也存在问题，正如您将在这些屏幕截图中看到的那样。(说明问题的这是一个代码库)。
Chrome 100%缩放：
90%含铬：
而在Firefox中，这种效果根本不起作用。
在铬(旋转虚线)中的悬停：
在Firefox中悬停(没有虚线)：
我怎样才能获得负责任的工作效果呢？在不同的浏览器和不同的缩放级别。
下面是演示该方法的一些代码片段：
<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4b">
<a href="#set-4" class="column product hi-icon product-icon"><div class="icon-text">Product</div></a>
</div>CSS：
.hi-icon-effect-4b .hi-icon:hover {
-webkit-transition: box-shadow 0.2s;
-moz-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.hi-icon-effect-4b .hi-icon:hover:after {
-webkit-animation: spinAround 9s linear infinite;
-moz-animation: spinAround 9s linear infinite;
animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spinAround {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}玩代码在这里。谢谢你的想法！
回答 2
Stack Overflow用户
发布于 2015-09-23 05:56:56
下面是解决这个问题的一个计划。
我避免使用边框，并处理所有有背景的东西:一些用于条纹，另一个用于隐藏，另一个用于隐藏效果，另一个用于掩盖内部圆圈。
现在它具有响应性(边框的大小是填充，可以设置为百分比)，并且在FF中工作正常。
背景有不同的颜色，因此很容易看到哪一个是每一个，旋转也被延迟，使人们更容易看到正在发生的事情。
但现在它在IE上失败了..。
希望有人能解决这个问题
.hi-icon {
width: 100px;
height: 100px;
position: relative;
font-size: 50px;
padding: 50px;
border-radius: 50%;
}
.hi-icon:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding: 3%;
border-radius: 50%;
background-image: linear-gradient(lightgray, lightgray),
linear-gradient(transparent 30%, red 70%),
linear-gradient(45deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),
linear-gradient(-45deg, green 0%, green 25%, transparent 25%, transparent 50%, green 50%, green 75%, transparent 75%, transparent 100%),
linear-gradient(225deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%),
linear-gradient(135deg, blue 0%, blue 25%, transparent 25%, transparent 50%, blue 50%, blue 75%, transparent 75%, transparent 100%);
background-position: center center,bottom center,top left,bottom left,bottom right,top right;
background-size: 100% 100%,100% 1000%,50% 50%,50% 50%,50% 50%,50% 50%;
background-clip: content-box,border-box,border-box,border-box,border-box,border-box;
background-repeat:no-repeat;
transition: background-position 1s;
z-index: -1;
}
.hi-icon:hover:after {
background-position: center center,top center,top left,bottom left,bottom right,top right;
animation: rotate 3s linear infinite 1s;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}<div class="hi-icon">TEST</div>
Stack Overflow用户
发布于 2015-09-23 11:11:41
这是火狐的臭虫。如果您想要完全相同的悬停效果，请查看其他一些这里有选择。。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32702816
复制相关文章
相似问题
腾讯云开发者
