使用html5+css3來實現(xiàn)slider切換效果告別javascript+css

2024-09-05 07:20:04

字體：大中小

供稿：網(wǎng)友

好吧，上次說要趕緊的補上幾篇文章，結(jié)果淡定的失約了。又是近一個月才發(fā)一篇，真是讓人郁悶。發(fā)現(xiàn)最近總是抽不出時間了，基本都是一個項目接一個項目的安排，自己不是在空閑的時候找不到合適的話題，就是在有糾結(jié)話題的時候抽不出時間了。所以我決定一段時間內(nèi)先把自己糾結(jié)過的問題先歸納下知識點，等空閑的時候在一個一個深入研究，然后再整理成文章后分享出來。

開始進入正題，提到slider，過去一直都是用css+js來配合實現(xiàn)相關(guān)的切換效果。聽過大家一直討論使用html5+css3的實現(xiàn)方式，自己卻一直沒有動手實現(xiàn)過。好吧，這次我有時間來玩下css3了。其實，我也是被微博上的一條消息給吸引過來的，看到別人實現(xiàn)的效果很贊，然后自己就有了動手做一把的沖動。
一、效果圖

跟過去用js來實現(xiàn)的效果看上去差不了太多，但是整體感覺很優(yōu)雅。好吧，css3的強大之處在于，我寫了很少的代碼，就實現(xiàn)了比較復(fù)雜的效果。但是這個示例也有不太完美的地方，就是在兩張圖片切換的時候，如果中間間隔有圖片，那么在css3動畫的執(zhí)行過程中還是會看到，比較不給力。不過想想，這可是純css3來實現(xiàn)的效果啊，用js來實現(xiàn)的復(fù)雜的html結(jié)構(gòu)變動在這里可看不到，所以上面的效果很難簡單用css3來實現(xiàn)。
二、html結(jié)構(gòu)　

復(fù)制代碼

上一篇：幾個解決兼容IE6/7/8不支持html5標(biāo)簽的幾個方法

下一篇：html5 Canvas畫圖教程(1)―畫圖的基本常識