如何在css3和jquery中创建边框填充动画?

时间:2015-12-12 00:12:09

标签: jquery css3 animation border

在我的网站上,我有一个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;
  }
}

0 个答案:

没有答案