|
動畫圖片翻轉(zhuǎn)
另一個前端工程師常見的現(xiàn)象是，當(dāng)用戶將鼠標(biāo)放到圖片上時，變換為另一張圖片。在這個技巧中，讓我們看看如何讓圖片從一個到另一個漸變交換，而不是簡單的直接交換兩張圖片。實現(xiàn)這個效果的CSS和HTML如下：
div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
div.swapper:hover img.img1, img.img2 { opacity: 0; }
<div class="swapper">
<img class="img1" style="position: absolute;" src="megan.jpg">
<img class="img2" src="megan2.jpg">
</div>
在這里，”transition”屬性使用簡化符號來指定（圖片）過渡的所有參說。第一個參數(shù)將屬性指定為動畫，第二個參數(shù)指定時間，第三個參數(shù)為簡便指定時間功能�！眅ase-in-out”只是眾多你可以只有支配的時間功能中的一個。你還可以指定一個線形變換、漸入、漸出或高級的立體貝塞爾曲線效果！
你可以自己親身體驗一下這個效果，你將會看到下圖中的效果。
截圖4. 一個CSS只能制定一個漸變效果
設(shè)想: 純CSS的漸變效果！
CSS 多卷布局
使用純CSS實現(xiàn)多卷，而不用HTML的table是件相當(dāng)棘手的事情。由于CSS3用于多卷布局的屬性在Safari和WebKit中已經(jīng)可用，你可以明確的定義卷數(shù)，正確實現(xiàn)你所想要的效果。先看一下下面的CSS和HTML代碼：
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}
<div id="columns">
<p>Column A</p>
<p>Column B</p>
<p>Column C</p>
</div>
這些代碼定義了卷中的HTML代碼。這些代碼定義了這個DIV應(yīng)該被分成3卷。每個段落就在他們自己的卷里面。
這些代碼同樣說明了一種在使用一種尚未成為W3C標(biāo)準(zhǔn)的一部分時的可靠機制.這段代碼指定了”column-count”和”column-gap”屬性，并帶有”-webkit”和”-moz”前綴，以及沒有前綴的情況。這意味著這段代碼將會像基于Mozilla的瀏覽器一樣可以在Safari和WebKit的瀏覽器中運行，而且一旦CSS3標(biāo)準(zhǔn)被最終確定下來之后，那些前綴就可以去掉了。
你可以在下面看到效果：
截圖5. 多卷
使用這種方法， 如果瀏覽器不支持多卷布局，段落將一個接著一個顯示。正如本文前面提到的，這些方法在不支持它們的瀏覽器中會被降級（也就是無效）。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 用于WebKit的CSS訣竅 [1] 下一頁 用于WebKit的CSS訣竅 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 用于WebKit的CSS訣竅 [2]
