在搞清楚這個(gè)問題之前,我們得先弄清楚H5和css3有哪些驚人的特性

首先我們來看下H5的新特性,canvas標(biāo)簽,多媒體標(biāo)簽(audio/video) 離線存儲(chǔ), 新的表單元素, 新的表單控件 地理定位等等,要說道驚人效果,其中canvas audio video 還有地理定位等就可以夠玩一年 但題目中的一個(gè)純字,一下子就將這一群一棒子打死… 因?yàn)橐娉鲶@人效果,就不得不用到j(luò)s…那么,剩下的可用的就剩語(yǔ)義化標(biāo)簽,表單控件,新元素等等了.就語(yǔ)義化標(biāo)簽來說,本身存在的意義僅僅在于”語(yǔ)義化”而已,在視覺上,基本上和普通元素沒什么區(qū)別,所以也就無從談起什么驚人效果.那么就剩下表單元素和新增的表單元素類型…

就對(duì)于我們開發(fā)者而言,就表單元素新增的各種特性,還真算得上有些有用的效果,比如,新增表單類型中的date.要知道,在以前的版本中,這種東西除了用插件,就只能自己手寫,不光是各種事件處理,dom操作,還得編寫復(fù)雜的日歷dom結(jié)構(gòu)布局.各種考慮兼容,一不小心,就在哪個(gè)版本掛掉了,可是即便用上了插件,也還得去各種查詢api,更主要的是,這些都會(huì)增加你的項(xiàng)目體積以及程序復(fù)雜程度.然而,當(dāng)date類型出來之后,我要做的僅僅是只需要將input的type屬性變成date即可 就像這樣:

[html] view plain copy

<input type=“date” />

然后你就會(huì)得到這樣的結(jié)果:

這在表單開發(fā)的過程中可以大大提高開發(fā)效率,同時(shí)還能有效減小項(xiàng)目體積以及項(xiàng)目的穩(wěn)定定.然而,好景不長(zhǎng).很快我們發(fā)現(xiàn)這個(gè)新增的功能很難由我們自己去定義樣式,并且每個(gè)瀏覽器上的顯示風(fēng)格都不一樣,這意味著如果項(xiàng)目需求對(duì)頁(yè)面的還原度要求很高的話,這個(gè)功能瞬間變成雞肋,也就談不上什么驚人了,充其量算是個(gè)效果….

也就是說就html部分,能帶給我們的驚人效果實(shí)在是有限,這就只能看css了

首先,css本身就是用于處理樣式的,而”驚人效果”無外乎就是視覺體驗(yàn),這剛好就是css的拿手好戲.css3中新增的特性非常豐富:2D/3D轉(zhuǎn)換,過渡,動(dòng)畫,圓角,陰影,漸變等等等等

其中2D/3D轉(zhuǎn)換就能很輕易的寫出3D場(chǎng)景

transform : rotateY(45deg); 即可實(shí)現(xiàn)如上效果

想要更高級(jí)? 沒問題,咱們來個(gè)動(dòng)效

搞定,咱們來看看效果,還是挺不錯(cuò)的吧.

實(shí)際上我們甚至可以通過過渡,加上偽類選擇器,來通過純css來實(shí)現(xiàn)輪播圖效果

至于漸變,我們可以通過設(shè)置顏色的位置值來實(shí)現(xiàn)分界線效果,然后通過巧妙的重復(fù)漸變,能夠畫出如下圖案:

總結(jié)

以上是生活随笔為你收集整理的纯html5+css3能写出什么惊人效果?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。