【问题标题】: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
}
<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>

【讨论】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多