一个使用CSS3动画效果实现的图片宽度 横向展开的效果。
HTML代码如下:
<ul id="kwicks"> <li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li> <li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li> <li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li> <li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li> </ul>
上面的代码仅由一个ul组成,对应的CSS代码如下:
/*横向展示关键是添加: overflow-x:hidden,避免出现异常*/ #kwicks { width: 590px; overflow-x: hidden; } #kwicks:hover li a { width: 100px; } #kwicks li { float: left; overflow-x: hidden; display: block; } /*鼠标放上去时:宽度加大,具体过程由动画实现*/ #kwicks li:hover a { width: 285px !important; } /* 实现宽度变大的动态过程*/ #kwicks li a { display: block; text-indent: -9999px; width: 134px; height: 143px; transition-property: width; transition-duration: 1s; }
非常简单的一个动画效果,代码解析:
transition-property:width; /*会产生带有平滑改变元素宽度的过渡效果*/ transition-duration: 1s; /*过渡效果持续1秒*/