I am working with a circle element that has half a border, and I want the border to animate and cover the entire circle when hovered over.
However, I am facing an issue where the border appears pixelated and of poor quality. Is there a way to fix this?
Here's the JSFIDDLE link for reference.
I achieved this effect using CSS, here is the code snippet:
.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;
}