border-radius 不再适用于动画图像

Question

我制作了一个 360 度旋转的锚点叠加层动画，悬停时应该变成一个圆圈。今天早上它工作得很好，然后我整天都在处理网站上的其他元素，现在我意识到它不再工作了。

我只花了 2 个小时来回溯我的更改，但仍然无法弄清楚为什么它不起作用。由于 firefox 错误，我创建了透明覆盖包装器，当将鼠标悬停在动画图像上作为包装器时，link 在单击时不起作用。

This is the link to the website

我说的是左上角的图标。悬停时它只是旋转，但不会将 border-radius 更改为 50%。通常它应该这样做，然后在 2 秒内旋转回 border-radius 0。

也许您知道为什么它不再起作用了？将不胜感激任何想法。

提前致谢

Answer 1

border-radius 有效，您只需将 overflow:hidden 添加到 .wrap_animation。

.wrap__animation {
    position: absolute;
    left: 0;
    border-radius: 0;
    outline: 1px solid transparent;
    transition: all 2s;
    height: 46px;
    width: 46px;
    top: 23px;
    overflow: hidden;
}

.navigation__logo__wrap {
    overflow: hidden;
    z-index: -1;
    height: 46px;
    width: 46px;
 }
 
 .navigation__logo {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    height: 60px;
    width: 60px;
    background: #f66437;
    background: -moz-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #f66437), color-stop(19%, #f66437), color-stop(37%, #f4352f), color-stop(37%, #f66437), color-stop(56%, #f4352f), color-stop(92%, #f66539), color-stop(100%, #f66539));
    background: -webkit-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%);
    background: -o-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%);
    background: -ms-linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%);
    background: linear-gradient(45deg, #f66437 0%, #f66437 19%, #f4352f 37%, #f66437 37%, #f4352f 56%, #f66539 92%, #f66539 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#f66437', endColorstr='#f66539', GradientType=1 );
    animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    -webkit-animation: spin 4s linear infinite;
    -ms-animation: spin 4s linear infinite;
    
}

.wrap__animation:hover {
    transform: rotate(1080deg);
    border-radius: 50%;
    transition: all 2s;
}

<a class="page-link wrap__animation" href="index.html" title="home">
          <div class="navigation__logo__wrap">
              <div class="navigation__logo"></div>
          </div>
</a>

border-radius 不再适用于动画图像

border-radius isnt working anymore on animated image

html

css

animation

border

hover