超期待的 3 個將推出的 CSS 特性！
大家好，我是魚皮，今天給大家總結(jié)分享一下 3 個很 ???? 的即將推出的 CSS 屬性，等你看完，每一個都要喊絕了 !
聲明一下：這些特性現(xiàn)在基本都不好使，就算有的高級瀏覽器支持了，也只是個例?？梢云诖幌乱院?~
一、@container
@container 是一個容器查詢方法，正如它的名字一樣，它是用來支持根據(jù)當(dāng)前元素所在容器的大小來進(jìn)行動態(tài)修改添加樣式的，這跟 @media 基于視口大小是不一樣的。
來舉個??
先創(chuàng)建一個側(cè)邊欄和一個主內(nèi)容
<body>
<aside class="sidebar">
<div class="card">
<h4>側(cè)邊欄</h4>
<p>
To the world you may be one person, but to one person you may be the world.
</p>
</div>
</aside>
<main class="content">
<div class="card">
<h4>主內(nèi)容</h4>
<p>
To the world you may be one person, but to one person you may be the world.
</p>
</div>
</main>
</body>
讓這兩個元素橫向布局，且側(cè)邊欄寬度占 30%，主內(nèi)容寬度占 70%
body {
display: flex;
color: white;
}
h4 {
color: black;
}
.sidebar {
width: 30%;
}
.content {
width: 70%;
background: #f0f5f9; /* 給個底色，與側(cè)邊欄區(qū)分 */
}
.card {
background: lightpink;
box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
目前為止是這樣的效果：
現(xiàn)在我們發(fā)現(xiàn)主內(nèi)容這塊兒空間很富余，便想改變一下標(biāo)題和內(nèi)容文字的布局，此時就可以用上 @container 了，直接讓主內(nèi)容在當(dāng)前容器寬度大于 400px 時變成橫向布局
@container (min-width: 400px) {
.content .card {
display: flex;
}
}
此時效果如下：
是不是很酷 ??
基于這點，還想到了一個之前我做過的需求中很頭疼的需求，就是字體大小隨著容器寬高的改變而動態(tài)改變，如果支持了這個特性，那這個需求也就很簡單了
二、object-view-box
object-view-box 屬性就類似于 SVG 中的 viewBox 屬性。它允許您使用一行 CSS 來平移、縮放、裁剪 圖像。
我們就對這張圖來動動刀子
加一行代碼
.crop {
object-view-box: inset(10% 50% 35% 5%);
}
實現(xiàn)的效果就是這樣：
跟原圖對比一下就是這樣：
除了簡單的裁剪，我們還能基于它實現(xiàn)一些好玩的效果，例如：
三、animation-timeline
animation-timeline 相比前兩個就更好玩了！它允許我們基于容器滾動的進(jìn)度來對動畫進(jìn)行處理，簡而言之就是頁面滾動了百分之多少，動畫就執(zhí)行百分之多少。而且動畫也能根據(jù)頁面倒著滾動而倒著播放
.shoes {
animation-name: Rotate;
animation-duration: 1s;
animation-timeline: scrollTimeline;
}
@scroll-timeline scrollTimeline {
source: selector('#container');
orientation: "vertical";
}
@keyframes Rotate {
from {
transform: translate(-200px, -200px) rotate(0deg);
}
to {
transform: translate(100vw, 100vh) rotate(720deg);
}
}
使用起來很簡單，就是在本身的基礎(chǔ)動畫上，新增一個 animation-timeline 屬性即可，我們也可以對這個 timeline 定義是基于哪個容器，滾動方向是水平還是豎直
大致效果就是：
最后
這三個 CSS 新特性，你們最喜歡哪個？有沒有想到一些比較實用的場景，歡迎在評論區(qū)分享~
歡迎加入 魚皮的編程知識星球（點擊了解詳情），帶你一起學(xué)編程做項目，想加入的同學(xué)可添加魚皮微信 yupi5927 備注【想加星球】，無備注不通過，非誠勿擾謝謝。
往期推薦