CSS3动画边框颜色 [英] CSS3 animate border color
本文介绍了CSS3动画边框颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用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屋!
查看全文