Python ccs動畫及陰影

2022-06-23 18:39:14 字數 1142 閱讀 2513

動畫及陰影

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