CSS3动画边框颜色 [英] CSS3 animate border color

问题描述

我想使用CSS3对元素的边框进行动画处理，无论是悬停状态还是正常状态。有人可以为我提供一个代码片段，或者可以指导吗？

I want to animate borders of an element using CSS3, whether it's in hover state or normal state. Can someone provide me a code snippet for this or can guide?

我可以使用jQuery，但是寻找一些纯CSS3解决方案。

I can do this using jQuery but looking for some pure CSS3 solution.

推荐答案

您可以使用CSS3 转换。请查看此示例：

You can use a CSS3 transition for this. Have a look at this example:

http://jsfiddle.net/ujDkf / 1 /

以下是主要代码：

#box {
  position : relative;
  width : 100px;
  height : 100px;
  background-color : gray;
  border : 5px solid black;
  -webkit-transition : border 500ms ease-out;
  -moz-transition : border 500ms ease-out;
  -o-transition : border 500ms ease-out;
  transition : border 500ms ease-out;
}

#box:hover {
   border : 10px solid red;   
}

这篇关于CSS3动画边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！