純CSS3實現圖片展示特效
阿新 • • 發佈:2019-01-02
Web瀏覽器端的特效越來越讓人興奮,通過CSS和JavaScript,各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效,以前只能用JavaScript實現,可想而知會受到多方面的限制,特別是效能。而今天我們將用簡單的CSS3程式碼實現,你會發現它的動畫效果在現代瀏覽器的幫助下無比的順滑。
觀看演示HTML程式碼
通過上的演示,估計你已經能猜到,它的HTML結果應該是一個父元素裡包含多個子元素,沒錯:這裡用的是一個ol
和其子元素li
。
<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>
CSS程式碼
CSS程式碼要實現的動作就是當滑鼠懸停時讓寬度發生變化。
/* structure */
#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; }
/* individual kwicks */
#kwicks li a {
display: block;
text-indent: -9999px;
width: 134px;
height: 143px;
transition-property: width;
transition-duration: 1s;
}
非常簡單的幾段CSS程式碼就能實現我們要求的動作,但這裡有幾個事情需要注意:
-
最好要設定
overflow-x: hidden;
,以免出現奇怪的效果。 -
我們用兩個
transition-
屬性控制圖片展示的寬度,起初都是顯示一半,當滑鼠懸停在某個圖片上時,寬度增加。
這裡我們只使用了幾個圖片,但圖片的個數是不受限制的。
觀看演示5年前的時候我們根本無法用這麼簡單的程式碼實現這麼漂亮的效果。隨著瀏覽器的進步,javascript和CSS的發展,Web程式設計師的工作將變得越來越輕鬆。