編碼的世界 / 優質文選 / 生涯

CSS3實現橫向展示圖片滑動展示效果(轉載)


2022年7月05日
-   

一個使用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秒*/ 

 
 

熱門文章