前端（七）之動畫與陰影

QLQ 發(fā)布于2019-04-23 13:06 / 2441人閱讀

摘要：動畫及陰影動畫及陰影一拼接網(wǎng)頁一拼接網(wǎng)頁將區(qū)域整體劃分起名對其他區(qū)域布局不產(chǎn)生影響提出公共操作當(dāng)有區(qū)域發(fā)送顯示重疊脫離文檔流導(dǎo)致的需要通過調(diào)整層級一定需要最外層且最外層做自身布局時不要做過多布局操作二過渡二過渡屬性過渡時間必須延遲時間一般

動畫及陰影

一.拼接網(wǎng)頁

將區(qū)域整體劃分起名 => 對其他區(qū)域布局不產(chǎn)生影響
提出公共css => reset操作
當(dāng)有區(qū)域發(fā)送顯示重疊(脫離文檔流導(dǎo)致的), 需要通過z-index調(diào)整層級
一定需要最外層,且最外層做自身布局時,不要做過多布局操作

二.過渡

transition屬性

transition: 過渡時間(必須) 延遲時間(一般不設(shè)) 過渡屬性(一般采用all默認(rèn)值) 過渡曲線(貝賽爾曲線)(cubic-bezier())

過渡屬性具體設(shè)置給初始狀態(tài)還是第二狀態(tài) 根據(jù)具體需求

/*過渡的持續(xù)時間*/
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);

/*結(jié)論:*/
/*1.盡量懸浮靜止的盒子, 控制運動的盒子*/
/*2.不能確定區(qū)間范圍的屬性值, 不會產(chǎn)生動畫效果*/
/*display 不能做動畫  | opacity 可以做動畫*/

三.陰影

/*x軸偏移量 y軸偏移量 虛化程度 陰影寬度 陰影顏色*/
box-shadow: 0 0 10px 10px black;

/*一個盒子可以設(shè)置多個陰影, 每一套陰影間用逗號隔開*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.偽類實現(xiàn)邊框

/*自身需要定位*/
.box {
    position: relative;
}
/*偽類通過定位來完成圖層的布局*/
.box:before {
    content: "";
    /*完成布局*/
    position: absolute;
    top: 10px;
    left: 0;
    /*構(gòu)建圖層*/
    width: 1px;
    height: 100px;
    background-color: black;
}
.box:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    background-color: black;
    top: 0;
    left: 10px;
}