PC_官網設計

 

1. 頭部 header 固定 的兩種方式

• 固定定位
• 內容區 包裹，使用 overflow: hidden;

 

2. 動畫第二次起效

缺乏動畫初始參數

 

3. 隱藏元素

 

display: none;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
transform: scale(0);
transform: translate(-10000px);

 

4. 滾輪事件 綁定給 document 

 

5. window.onresize 處理瀏覽器縮放問題

 

6. 注意 background 覆蓋問題，記得分開寫

 

7. 若是一個元素進行 3D 變換，最好對其父元素 開啓 3D 空間。（解決層級問題）

 

8. backface-visibility: hidden;        背面不可見

 

9. transition: 1s top, 1s left, 1s right, 1s bottom;

 

10. 能用 visibility 實現隱藏，就不用 display: none;

 

11. 必定要注意 變量 += +變量+1; 防止變量是字符串。

 

12.canvas 動畫

（1） 不能用 css  設置 canvas 的 width 和 height

（2） 啊

 

13. overflow: hidden;    開啓了 BFC ，會打亂 3D 佈局。