動畫及陰影0. 什麼時候該用什麼布局
一.拼接網頁
將區域整體劃分起名 => 對其他區域布局不產生影響
提出公共css => reset操作
當有區域傳送顯示重疊(脫離文件流導致的), 需要通過z-index調整層級
一定需要最外層,且最外層做自身布局時,不要做過多布局操作
二.過渡 (動畫)
transition屬性
transition: 過渡時間(必須) 延遲時間(一般不設) 過渡屬性(一般採用all預設值) 過渡曲線(貝賽爾曲線)(cubic-bezier())
過渡屬性具體設定給初始狀態還是第二狀態 根據具體需求
/*過渡的持續時間*/
transition-duration: 2s;
/*延遲時間*/
transition-delay: 50ms;
/*過渡屬性*/
/*單一屬性 | 屬性1, ..., 屬性n | all*/
transition-property: all;
/*過渡曲線*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
/*結論:*/
/*1.盡量懸浮靜止的盒子, 控制運動的盒子*/
/*2.不能確定區間範圍的屬性值, 不會產生動畫效果*/
/*display 不能做動畫 | opacity 可以做動畫*/
三.陰影
/*x軸偏移量 y軸偏移量 虛化程度 陰影寬度 陰影顏色*/
box-shadow: 0 0 10px 10px black;
/*乙個盒子可以設定多個陰影, 每一套陰影間用逗號隔開*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
四.偽類實現邊框
/*自身需要定位*/
.box
/*偽類通過定位來完成圖層的布局*/
.box:before
.box:after
3D動畫和盒陰影及濾鏡
3d 開闢異次元空間 transform style preserve 3d 視距，透視 perspective npx 盒陰影 必須要有的 h shadow 水平陰影 v shadow 垂直陰影 可以選擇的 blur 模糊距離 spread 陰影尺寸 color 陰影顏色 inset 內陰影 文字...
圓角 陰影 rgba 和 動畫
設定某乙個角的圓角，比如設定左上角的圓角 border top left radius 30px 60px 同時分別設定四個角 border radius 30px 60px 120px 150px 設定四個圓角相同 border radius 50 box shadow h shadow v sh...
015 3D動畫和盒陰影及濾鏡樣式
015 3d動畫和盒陰影及濾鏡樣式 創造3d物體,或是展示乙個物體在三維空間中的運動,基礎條件是創造乙個3維座標系 transform style preserve 3d perspective 只能給父級 允許改變3d元素檢視3d檢視其 子元素 會獲得透視效果 只影響3d轉換元素 perspect...