實(shí)戰(zhàn)中使用CSS技巧分享

創(chuàng)建剪切動(dòng)畫

對(duì)于剪切動(dòng)畫，使用clip-path代替width/height，避免DOM重排導(dǎo)致性能過(guò)低。

.animate {
 width: 200px;
 height: 200px;
 background: #000;
 animation: 1s clip;
}
@keyframes clip {
 0% {
 clip-path: inset(0 0 0 0);
 }
 100% {
 clip-path: inset(0 100% 100% 0);
 }
}

clip-path也能用來(lái)進(jìn)行其他規(guī)則/不規(guī)則圖形的剪切

.clip {
 clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多邊形 */
 clip-path: circle(30px at 35px 35px); /* 圓形 */
 clip-path: ellipse(30px 25px at 35px 35px); /* 橢圓 */
}

優(yōu)化動(dòng)畫性能

除了使用transform3d開(kāi)啟gpu加速，還可以使用will-change強(qiáng)制gpu加速優(yōu)化動(dòng)畫性能

.animate {
 width: 200px;
 height: 200px;
 background: #000;
 animation: 1s clip;
 will-change: clip-path;
}
@keyframes clip {
 0% {
 clip-path: inset(0 0 0 0);
 }
 100% {
 clip-path: inset(0 100% 100% 0);
 }
}

實(shí)現(xiàn)長(zhǎng)寬比

使用padding模擬，然后子元素使用絕對(duì)定位

/* 1:1 */
.container {
 width: 200px;
}
.container:after {
 display: block;
 content: ' ';
 padding-top: 100%;
}
/* 16:9 */
.container {
 width: 200px;
}
.container:after {
 display: block;
 content: ' ';
 padding-top: calc(100% * 9 / 16);
}

垂直居中

我們常用的方式：

其余還有padding上下?lián)胃?/code>、display: table、position + margin: auto、絕對(duì)定位 + margin等等，這些屬于不常用、特殊場(chǎng)景才能用、CSS3之前的hack方式，CSS3之后就不必使用這些來(lái)實(shí)現(xiàn)垂直居中，就不多說(shuō)了。

其中display: flex屬于萬(wàn)金油，大多數(shù)場(chǎng)景可以直接用它，但還是有些特殊的場(chǎng)景不能用：

1. 子元素需要文字截?cái)啵瑸榱思嫒?.X的Android瀏覽器，必須使用其他方式（一般是transform）

2. 子元素需要多行布局，4.x的Android不支持flex-wrap，不能多行布局

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

前端項(xiàng)目中初始化項(xiàng)目結(jié)構(gòu)

使用js變量作用域遇到的bug

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com