一、基礎班學習路線

Web服務器

什么是服務器

申請免費空間以及網站上傳

四、HTML5和CSS3提高

1.CSS3 2D轉換

2D轉換之移動 translate

讓一個盒子水平垂直居中

2D轉換之旋轉 rotate

案例-三角形

設置轉換中心點transform-origin

旋轉案例

2D轉換之縮放 scale

圖片放大案例

案例-分頁按鈕

2D轉換綜合寫法及順序問題

2D轉換小結

2.CSS3 動畫

CSS3動畫基本使用

• 動畫比過渡更強大，不需要鼠標經過，自動播放
  

動畫序列

CSS3 動畫常見屬性

CSS3 動畫簡寫

大數據熱點圖案例

• 注意權重的問題

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

速度曲線之steps步長

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

案例-奔跑的熊大

• 跑過來的效果：
  

3.CSS3 3D轉換

認識3D轉換

3D移動 translate3d

透視perspective

3D旋轉 rotateX

3D呈現 transform-style

案例-兩面翻轉盒子

案例-3D導航欄

案例-旋轉木馬

瀏覽器私有前綴

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。