javascript - 使用 CSS 或 JQuery 绘制 div 边框

Question

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

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

这可以用 JQuery 或 CSS3 实现吗？

Answer 1

首先，我建议您使用 CSS 来制作动画，除非您使用的是(非常)旧的浏览器，即便如此，通常我只会在动画对页面必不可少的情况下才回退到 JS。

您可以使用简单的 CSS 过渡来制作基本动画:

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

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

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

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

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