您的位置:首页 - 教程 - CSS - 正文
CSS3光标悬停宽度逐渐增加到指定值

先看代码,效果在代码下面:
<!DOCTYPE html>
<html>
<head>
<style>
div#transitionhovertree
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div#transitionhovertree:hover
{
width:300px;
}
</style>
</head>
<body>

<div id="transitionhovertree"></div>

<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>

<p><b>何问起注释:</b>请使用新版浏览器查看。</p>

</body>
</html>


请移上鼠标查看效果:

请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。

何问起注释:请使用新版浏览器查看。



参考:http://hovertree.com/h/bjaf/rnqpxtsq.htm

评论: