Question

我有一个带有半边框的圆形元素，当它悬停边框动画以覆盖整个圆圈时。

我的问题是边框出现质量差，像素化。有办法解决这个问题吗？

我用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;
}

Answer 1

通过使每个div占据圆圈的一半，只需要两个弧形加上一个隐藏元素，可以进一步简化AlexG的小提琴。考虑使用：

border-color: #e01f25 transparent transparent #e01f25;

而不是

border-color: #e01f25 transparent transparent transparent;

请参阅以下小提琴，获取示例：https://jsfiddle.net/38d47ag0/

还可以注意到我只转换transform属性，因为这是唯一正在改变的属性。

旋转边框 - 质量差

1 个答案: