跨浏览器/缩放响应悬停效果

Question

我想使用悬停效果，例如this tutorial中的悬停效果，但令我沮丧的是效果不起作用。您将在这些屏幕截图中看到，在不同的缩放级别和Firefox中也存在问题。 （Here is a codepen说明了问题）。

Chrome放大100％：

Chrome中的90％：

在Firefox中，效果根本不起作用。

悬停在Chrome中（旋转虚线）：

在Firefox中悬停（无虚线）：

如何才能使效果起作用？两种浏览器和不同的缩放级别。

以下是一些说明该方法的代码片段：

.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);
    }
}

CSS：

column < 3.2
column < 5 > 2.2
column > 2 < 5.2

使用codepen here进行游戏。谢谢你的想法！

Answer 1

这是一个解决它的尝试。

我避免使用边框，并使用背景处理所有内容：一些用于条纹，另一个用于隐藏 - 显示效果，另一个用于遮盖内圈。

现在它是响应式的（边框的大小是填充，可以设置为百分比），并且可以在FF中正常工作。

背景有不同的颜色，因此很容易看出每个背景，旋转也会延迟，以便更容易看到发生的事情

但现在它在IE中失败了......

希望有人能解决这个问题

＆＃13;

＆＃13;

.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);}
}

＆＃13;

<div class="hi-icon">TEST</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一个firefox Bug。查看其他options here.如果您想要完全相同的悬停效果。