在我的网站上,我有一个div,其中我给了边界半径100%。我想要一个动画,当我将鼠标悬停在圆圈div上时,它的边框应该用动画填满100%。我是css3和jquery的新手。我怎样才能做到这一点?感谢
<div class="circle"></div>
我试过这个,但没有工作
.circle {
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
border-radius: 50%;
background: #E94E3D;
box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
}
.circle .text {
position: absolute;
top: 38px;
left: 30px;
width: 60px;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 18px sans-serif;
transition: opacity .2s ease;
}
.circle:hover {
animation: border .4s ease 1 forwards;
cursor: none;
}
@keyframes border {
0% {
box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
}
25% {
box-shadow: 0 -125px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
}
50% {
box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
}
75% {
box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
}
100% {
box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 120px 40px 0 2px #e94e3d, 0 0 0 2px #ffffff;
}
}