Question

我的目标是在我的某个网页上为我的div元素的边框添加一些动画。

我想知道如何在onHover事件中为我的div列表绘制/设置动画边框。

这可以用JQuery或CSS3吗？

Answer 1

首先，我建议您使用CSS制作动画，除非您正在使用（非常）旧的浏览器，即使这样，如果动画对于页面必不可少，我也只会回到JS。

您可以通过简单的CSS过渡来执行基本动画：

＆＃13;

.example{
  border: 2px solid #dd0;
  
  -moz-transition: border linear 1s;
  -o-transition: border linear 1s;
  -webkit-transition: border linear 1s;
  transition: border linear 1s;
}
.example:hover{
  border: 2px solid #000
}

＆＃13;

<div class="example">This is some text</div>

＆＃13;

您还可以尝试使用更复杂的方法such as this，它使用关键帧为虚线边框设置动画。下面的示例（从该教程中采取和修改）：

＆＃13;

.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
}

.animation-examples.one:hover {
  animation: 1s animateBorderOne ease infinite;
}

@keyframes animateBorderOne {
  0% {
    outline-color: #E0E4CC;
    box-shadow: 0 0 0 10px #69D2E7;
  }
  50% {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
  100% {
    outline-color: #E0E4CC;
    box-shadow: 0 0 0 10px #69D2E7;
  }
}

＆＃13;

<div id="animation-examples">
  <div class="animation-examples one">
    Sample Text
  </div>
</div>

＆＃13;

Answer 2

解决方案是使用 css动画。它主要用于关键帧。

这是你的div：

<div>
What a test.
</div>

现在你的css：

div {
  border: 3px solid black;
}

div:hover {
  animation-duration: 1s;
  animation-name: color;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes color {
  0% {
    border-color: darkred;
  }
  100% {
    border-color: orange;
  }

}

这个例子受到了我发现的一个广泛的启发（可能在SO中）。小提琴here。更多示例here。

使用CSS或JQuery绘制div边框

2 个答案: