css 给你灵感—css滑动影集

这是一个非常有意思的css作品，它看起来就像是动画，纯粹是用css做的，当你看到代码你会觉得它很简单。我想如果配合JS可能效果会更好。把鼠标放到图片上一张张翻着看吧。

不知道你会不会觉得css不难，难的是我们的思想。

Html

<ul id="galleryie">
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="1.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="2.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="3.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="4.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="5.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="6.jpg"/></a></li>
    <li><a href="#freeren"> <img title="滑动影集" alt="滑动影集freeren.org" src="7.jpg"/></a></li>
</ul>
 

Css

#galleryie {
    background:#FFFFFF url(bg.gif) left no-repeat;
    height:297px;
    list-style-type:none;
    margin:0 auto;
    overflow:hidden;
    padding:0 0 0 8px;
    width:466px;
}
#galleryie li {
    float:left;
    padding-top:5px;
}
#galleryie li a {
    border-right:1px solid #FFFFFF;
    cursor:default;
    display:block;
    float:left;
    height:278px;
    overflow:hidden;
    text-decoration:none;
    width:28px;
}
#galleryie li a img {
    border:0 none;
}
#galleryie li a:hover {
    background:#eee;
    width:185px;
}