Question

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

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

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

更新代码

<强> EDITED

＆＃13;

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

＆＃13;

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

＆＃13;

用动画在圆周上绘制边框

1 个答案: