一、基礎(chǔ)班學(xué)習(xí)路線

Web服務(wù)器

什么是服務(wù)器

申請免費(fèi)空間以及網(wǎng)站上傳

四、HTML5和CSS3提高

1.CSS3 2D轉(zhuǎn)換

2D轉(zhuǎn)換之移動 translate

讓一個盒子水平垂直居中

2D轉(zhuǎn)換之旋轉(zhuǎn) rotate

案例-三角形

設(shè)置轉(zhuǎn)換中心點transform-origin

旋轉(zhuǎn)案例

2D轉(zhuǎn)換之縮放 scale

圖片放大案例

案例-分頁按鈕

2D轉(zhuǎn)換綜合寫法及順序問題

2D轉(zhuǎn)換小結(jié)

2.CSS3 動畫

CSS3動畫基本使用

• 動畫比過渡更強(qiáng)大，不需要鼠標(biāo)經(jīng)過，自動播放
  

動畫序列

CSS3 動畫常見屬性

CSS3 動畫簡寫

大數(shù)據(jù)熱點圖案例

• 注意權(quán)重的問題

• 這里之所以用寬和高而不用scale，因為后者會把陰影一起放大，不好看
  
  
• 前面的.city用top和right，這里要覆蓋他不能用bottom或則left

速度曲線之steps步長

• 打字機(jī)效果（一步打一個字）：注意字體大小和寬度關(guān)系（10個20px的字和200px寬的盒子）；分10步，每一步打一個字，steps(10)
  
  

案例-奔跑的熊大

• 跑過來的效果：
  

3.CSS3 3D轉(zhuǎn)換

認(rèn)識3D轉(zhuǎn)換

3D移動 translate3d

透視perspective

3D旋轉(zhuǎn) rotateX

3D呈現(xiàn) transform-style

案例-兩面翻轉(zhuǎn)盒子

案例-3D導(dǎo)航欄

案例-旋轉(zhuǎn)木馬

瀏覽器私有前綴

總結(jié)

以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（CSS3）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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