Я делаю круговые кнопки с несколькими градиентами, и он должен вращаться на hover..
<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: зависание не работает в любом браузере.
2- Если это работает, я думаю, что он будет вращать как круглый фон, так и текст "Главная". Будет ли способ вращать круг только?
3- Я не уверен, как объяснить это, но это как если бы в окружности не было много полигонов. Есть видимые прямые линии, которые можно увидеть при масштабировании. Эта проблема возникает только в некоторых браузерах и не кажется, изменились, установив радиус границы в нечто большее.
Измените стиль наведения на
li:hover .home {
background: linear-gradient(90deg, #aac4df 15%, #556270 25%, #556270 50%, #414F55 50%);
}
решит все ваши проблемы