fiddle

Question

我正在制作具有多个渐变的圆形按钮，并且它假设在悬停时旋转..

<ul class="navigation">
    <li>
        <a href="#" class="home">Home</a>
    </li>
</ul>

的CSS：

.navigation li {
        float: left;
    }

.navigation li a {
    display: inline-block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: white;
    text-decoration: none;
}

.home {
    background: linear-gradient(130deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
    width: 110px;
    height: 110px;
    line-height: 110px;
    position: relative;
    z-index: -1;
}

.home:hover {
    transform: rotate(-45deg);
}

我在这里遇到了多个问题..

1- .home：hover上的旋转在任何浏览器中都不起作用。

2-如果确实有效，我猜它会旋转圆形背景和文字＆＃34; Home＆＃34;。有没有办法只旋转圆圈？

3-我不确定如何解释这个，但它好像圆圈没有足够的多边形，在缩放时可以看到可见的直线，这问题只出现在某些浏览器中，并且似乎没有通过将border-radius设置为更大的值来改变。

Answer 1

将悬停样式更改为

 li:hover .home {
     background: linear-gradient(90deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
 }

将解决您的所有问题

为什么变换旋转时悬停不起作用？

1 个答案:

fiddle