用动画围绕圆圈绘制边框[重复]

Question

当我将鼠标悬停在圆圈上时，我想要一个 2px 的边框围绕一个圆圈慢慢绘制。像这样https://jsfiddle.net/cf6fqmbx/

我尝试了相同的方法，但我在圆圈下有内容，所以当我将鼠标悬停在它上面时，框阴影与内容重叠。无论如何要实现这个（CSS3或jQuery）？

我现在的小提琴https://jsfiddle.net/Lkch05ok/3/

<div class="banner-image"></div>

<div class="circle_holder">
  <div class="circle"></div>
  Lorem Ipsum Dolor
</div>

Answer 1

希望这是你想要的。

要让边框动画变慢，只要增加延时即可。就像我在这里所做的那样。

.circle:hover {
  animation: border 2s ease 1 forwards;
}

更新代码

已编辑

html {
  height: 100%;
}
body {
  height: 100%;
  background: #ddd;
}
.header{
  width:100%;
  height:100px;
  background:cyan;
  z-index: 9999;
}
.circle_holder {
  width: 150px;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
}
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: red;
  box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px #dddddd;
}
.circle:hover {
  animation: border 2s ease 1 forwards;
  cursor: pointer;
}
@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  25% {
    box-shadow: 0 -125px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  50% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  75% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  100% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 120px 40px 0 2px #dddddd, 0 0 0 2px black;
  }
}
span {
  position: absolute;
  bottom: -50px;
  color: #333;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

<div class="header">

</div>
<div class="circle_holder" style="z-index: 1;">
  <div class="circle">
  <span>Lorem Ipsum Dolor </span>
 </div>
</div>