0
У меня есть элемент окружности с половиной границы, когда он завис над огибающей границы, чтобы покрыть весь круг.Поворот границы - плохое качество
Моя проблема заключается в том, что граница отображается с плохим качеством, неровной. Любой способ обойти это?
Я сделал все это с помощью CSS, используя следующий код:
.circle {
border-radius: 50%;
position: relative;
-webkit-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.69);
-moz-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.69);
box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.69);
height: 180px;
width: 180px;
margin: 9px auto;
cursor: pointer;
}
.arc_q {
position: absolute;
top: -7px;
left: -7px;
width: 180px;
height: 180px;
border-radius: 50%;
border-width: 7px;
border-style: solid;
border-image: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arc_q_2 {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.arc_q_3 {
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
transition: all 400ms;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.arc_q_4 {
-webkit-transition: all 400ms;
-moz-transition: all 400ms;
transition: all 400ms;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.circle:hover .arc_q_3 {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.circle:hover .arc_q_4 {
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
#circle_1 .arc_q {
border-color: #e01f25 transparent transparent transparent;
}
#circle_1 .circle {
background-image: url('images/adegamae_logo.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
background-size: 80px;
}
Возможно, это связано с тем, что у вас несколько красных кругов, перекрывающих друг друга. Края затухают до прозрачных. Несколько полупрозрачных элементов слегка становятся менее прозрачными. Если вы наведите указатель мыши на свой круг, когда начнется анимация, вы увидите, что круг перемещается и очищает края снова и, таким образом, становится более плавным. Что вы должны попробовать: Скрыть все перекрывающиеся элементы. – AlexG
Да, я заметил это, я попытался скрыть перекрывающиеся элементы с непрозрачностью. Они оставались бы с 0 непрозрачностью, в то время как iddle, при наведении они переключались бы на 1 и оживляли, все равно выглядят странно, поскольку вы замечаете, что элементы перекрываются таким же образом, и таким образом я не могу сделать элементы оживленными назад, когда они зависают ... Например: https://jsfiddle.net/v0Lkq320/3/ –
Я подумал о элементе, чтобы скрыть нижние слои, что-то вроде этого: https://jsfiddle.net/v0Lkq320/5/ (простое решение) – AlexG