h5平臺(tái) 什么是h5頁(yè)面?
什么是h5頁(yè)面?首先h5不是一項(xiàng)技術(shù),而是一個(gè)標(biāo)準(zhǔn),一個(gè)技術(shù)的集合.其次就要知道什么是HTML語(yǔ)言,它是一種描述性語(yǔ)言,全名“HyperTextMarkupLanguage(超文本標(biāo)記語(yǔ)言)”,我們所
什么是h5頁(yè)面?
首先h5不是一項(xiàng)技術(shù),而是一個(gè)標(biāo)準(zhǔn),一個(gè)技術(shù)的集合.
其次就要知道什么是HTML語(yǔ)言,
它是一種描述性語(yǔ)言,全名“HyperTextMarkupLanguage(超文本標(biāo)記語(yǔ)言)”,我們所使用的頁(yè)面就是用html語(yǔ)言語(yǔ)言制作的。而h5就是HTML的第5個(gè)版本, 而在這個(gè)版本中自增了許多特性,
例如:
1. 拖拽釋放,自定義屬性,語(yǔ)義化更好的內(nèi)容標(biāo)簽,音頻 ,視頻(audio, video) ,畫布Canvas, 地理(Geolocation) API, 本地離線存儲(chǔ).
然而h5也有廣義的說(shuō)法,其中包含新增的c3特性,例如:1. 顏色: 新增RGBA , HSLA模式
2. 文字陰影(text-shadow)
3. 邊框: 圓角(border-radius) 邊框陰影 : box-shadow
4. 盒子模型: box-sizing
5. 背景:background-size background-origin background-clip
6. 漸變: linear-gradient , radial-gradient
7. 過渡 : transition 可實(shí)現(xiàn)動(dòng)畫
8. 自定義動(dòng)畫 animate @keyfrom
9. 媒體查詢 多欄布局 @media screen and (width:800px) {…}
10. border-image
11. 2D轉(zhuǎn)換transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12. 3D轉(zhuǎn)換
13. 字體圖標(biāo) font-face
14. 彈性布局flex
更多知識(shí)請(qǐng)關(guān) 注黑馬程序員哦~
如何在網(wǎng)頁(yè)上用HTML5實(shí)現(xiàn)動(dòng)畫效果?
感謝邀請(qǐng)。
h5中做動(dòng)畫的方法有很多種,一個(gè)一個(gè)說(shuō)吧。
1、h5元素本身的位移、縮放,控制css屬性即可,left、right、top、bottom,width、height,另外使用transform可以完成更復(fù)雜的變化。
2、透明度屬性可以完成漸隱漸現(xiàn)效果,切換background-image屬性,background-color屬性。
3、在畫布元素canvas中繪制,這是很多h5游戲引擎實(shí)現(xiàn)動(dòng)畫的方法,可以去學(xué)習(xí)一個(gè)h5的游戲引擎。
4、還有一個(gè)是矢量圖方式,svg代碼,用代碼控制svg元素也可以完成很好的動(dòng)畫效果,像d3.js這樣的圖表引擎便使用svg進(jìn)行繪制。