CSS3动画边框颜色

前端之家收集整理的这篇文章主要介绍了CSS3动画边框颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用CSS3使元素的边框动画化,无论是悬停状态还是正常状态。有人可以为我提供一个代码片段或可以指导吗?

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

解决方法

您可以使用CSS3转换。看看这个例子:

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

猜你在找的CSS相关文章