使用 CSS 或 JQuery 绘制 div 边框答案

【问题标题】：Drawing div borders with CSS or JQuery使用 CSS 或 JQuery 绘制 div 边框
【发布时间】：2016-07-22 23:42:32
【问题描述】：

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

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

这可以用 JQuery 或 CSS3 实现吗？

【问题讨论】：

你在想什么样的动画？我相信你可以用 JS 或 CSS 做一些基本的事情，但这取决于你想要什么:)
我确信您可以找到很多资源来制作 onHover 事件的动画。这个 QA 论坛是针对特定问题的。你试过什么？什么给你带来了问题？
请展示一些你已经尝试过的作品？

标签： javascript jquery css user-experience

【解决方案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
}

&lt;div class="example"&gt;This is some text&lt;/div&gt;

您还可以尝试更复杂的方法，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>

【讨论】：

【解决方案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。

【讨论】：