绘制 div 边界 CSS 或 JQuery

Question

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

我想知道如何在 onHover 事件中为我的 div 列表设置 drawing/animating 边框。

JQuery 或 CSS3 这可能吗？

Answer 1

首先，我建议您使用 CSS 制作动画，除非您使用的是（非常）旧的浏览器，即便如此，通常我只会在动画对页。

您可以使用简单的 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>

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 中）。 Fiddle here. More examples here.

绘制 div 边界 CSS 或 JQuery

Drawing div borders with CSS or JQuery

javascript

css

jquery

user-experience