言

整理了N個弧形動畫菜單，如下：點擊代碼框欄目上邊的result可以預覽,點擊html,css可以查看對應代碼

注： 因為有些平臺渲染不支持嵌入代碼編輯器，如下圖展示，因此無法自己操作，想要自己操作可以前往預覽圖下對應的源碼處，或者前往去我的個人網站：前端N多個弧形動畫特效菜單，文章內可以手勢體驗

菜單1

菜單2

菜單3

菜單4

菜單5

菜單6

菜單7

菜單8

菜單9

菜單10

菜單11

最后給個贊謝謝

#博客#

<div class="ice-cream"> 
 <div class="body"></div> 
 <div class="footer"></div> 
</div>

.ice-cream{ 
 width: 50px; 
 height: 120px; 
 margin: 100px auto; 
} 
.body{ 
 margin: 0 auto; 
 width: 50px; 
 height: 100px; 
 border-radius: 30px 30px 10px 10px; 
 background: red; 
} 
.footer{ 
 width: 10px; 
 height: 15px; 
 margin: 0 auto; 
 border-radius: 0 0 4px 4px; 
 background: #a77b64; 
}

... 
<div class="body"> 
 <div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 </div> 
</div>

.body{ 
 position: relative; 
 ... 
} 
... 
.loading{ 
 position: absolute; 
 width: 200px; 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4){ 
 background: red; 
}

.body{ 
 ... 
 overflow: hidden; 
}

.loading{ 
 position: absolute; 
 width: 200px; 
 top: -77px; 
 left: -89px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -77px; 
 left: -89px; 
 } 
 to { 
 top: 9px; 
 left: -84px; 
 } 
}

<div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
</div>
.loading{ 
 position: absolute; 
 top: -213px; 
 left: -27px; 
 width: 200px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -213px; 
 left: -27px; 
 } 
 to { 
 top: -46px; 
 left: -83px; 
 } 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1), 
.loading .line:nth-child(5){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2), 
.loading .line:nth-child(6){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3), 
.loading .line:nth-child(7){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4), 
.loading .line:nth-child(8){ 
 background: red; 
}

.body:before{ 
 position: absolute; 
 content: ""; 
 width: 25px; 
 height: 25px; 
 border: 5px solid #fff; 
 border-right: 5px solid transparent; 
 border-top: 5px solid transparent; 
 border-left: 5px solid transparent; 
 border-radius: 100%; 
 top: 5px; 
 left: 5px; 
 transform: rotate(120deg); 
 opacity: 0.7; 
 z-index: 10; 
}

ello~~大家好，今天小藍整理一些CSS樣式，2022已經支持的特性。

@layer

解決業務代碼的 !important 問題。為什么業務代碼需要用 !important 解決問題？因為 css 優先級由文件申明順序有關，而現在大量業務使用動態插入 css 的方案，插入的時機與 js 文件加載與執行時間有關，這就導致了樣式優先級不固定。

@layer 允許業務定義樣式優先級，層越靠后優先級越高，比如下面的例子，override 定義的樣式優先級比 framework 高：

@layer framework, override;
@layer override {
  .title {
    color: white;
  }
}
@layer framework {
  .title {
    color: red;
  }
}

subgrid

subgrid 解決 grid 嵌套 grid 時，子網格的位置、軌跡線不能完全對齊到父網格的問題。只要在子網格樣式做如下定義：

.sub-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

@container

@container 使元素可以響應某個特定容器大小。在 @container 出來之前，我們只能用 @media 響應設備整體的大小，而 @container 可以將相應局限在某個 DOM 容器內：

// 將 .container 容器的 container-name 設置為 abc
.container {
  container-name: abc;
}

// 根據 abc 容器大小做出響應
@container abc (max-width: 200px) {
  .text {
    font-size: 14px;
  }
}

一個使用場景是：元素在不同的 .container 元素內的樣式可以是不同的，取決于當前所在 .container 的樣式。

hwb

支持 hwb（hue, whiteness, blackness） 定義顏色：

.text {
  color: hwb(30deg 0% 20%);
}

三個參數分別表示：角度 [0-360]，混入白色比例、混入黑色比例。角度對應在色盤不同角度的位置，每個角度都有屬于自己的顏色值，這個函數非常適合直觀的從色盤某個位置取色。

lch, oklch, lab, oklab, display-p3 等

lch(lightness, chroma, hue)，即亮度、飽和度和色相，語法如：

.text {
  color: lch(50%, 100, 100deg);
}

chroma(飽和度) 指顏色的鮮艷程度，越高色彩越鮮艷，越低色彩越暗淡。hue(色相) 指色板對應角度的顏色值。

oklch(lightness, chroma, hue, alpha)，即亮度、飽和度、色相和透明度。

.text {
  color: oklch(59.69% 0.156 49.77 / 0.5);
}

更多的就不一一枚舉說明了，總之就是顏色表達方式多種多樣，他們之間也可以互相轉換。

color-mix()

css 語法支持的 mix，類似 sass 的 mix() 函數功能：

.text {
  color: color-mix(in srgb, #34c9eb 10%, white);
}

第一個參數是顏色類型，比如 hwb、lch、lab、srgb 等，第二個參數就是要基準顏色與百分比，第三個參數是要混入的顏色。

color-contrast()

讓瀏覽器自動在不同背景下調整可訪問顏色。換句話說，就是背景過深時自動用白色文字，背景過淺時自動用黑色文字：

.text {
  color: color-contrast(black);
}

還支持更多參數，詳情見 Manage Accessible Design System Themes With CSS Color-Contrast()。

相對顏色語法

可以根據語法類型，基于某個語法將某個值進行一定程度的變化：

.text {
  color: hsl(from var(--color) h s calc(l - 20%));
}

如上面的例子，我們將 --color 這個變量在 hsl 顏色模式下，將其 l(lightness) 亮度降低 20%。

漸變色 namespace

現在漸變色也支持申明 namespace 了，比如：

.text {
  background-image: linear-gradient(to right in hsl, black, white);
}

這是為了解決一種叫 灰色死區 的問題，即漸變色如果在色盤穿過了飽和度為 0 的區域，中間就會出現一段灰色，而指定命名空間比如 hsl 后就可以繞過灰色死區。

因為 hsl 對應色盤，漸變的邏輯是在色盤上沿圓弧方向繞行，而非直接穿過圓心（圓心飽和度低，會呈現灰色）。

accent-color

accent-color 主要對單選、多選、進度條這些原生輸入組件生效，控制的是它們的主題色：

body {
  accent-color: red;
}

比如這樣設置之后，單選與多選的背景色會隨之變化，進度條表示進度的橫向條與圓心顏色也會隨之變化。

inert

inert 是一個 attribute，可以讓擁有該屬性的 dom 與其子元素無法被訪問，即無法被點擊、選中、也無法通過快捷鍵選中：

<div inert>...</div>

COLRv1 Fonts

COLRv1 Fonts 是一種自定義顏色與樣式的矢量字體方案，瀏覽器支持了這個功能，用法如下：

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

上面的例子我們引入了矢量圖字體文件，并通過 @font-palette-values --colorized 自定義了一個叫做 colorized 的調色板，這個調色板通過 base-palette: 0 定義了其繼承第一個內置的調色板。

使用上除了 font-family 外，還需要定義 font-palette 指定使用哪個調色板，比如上面定義的 --colorized。

視口單位

除了 vh、vw 等，還提供了 dvh、lvh、svh，主要是在移動設備下的區別：

dvh: dynamic vh, 表示內容高度，會自動忽略瀏覽器導航欄高度。

lvh: large vh, 最大高度，包含瀏覽器導航欄高度。

svh: small vh, 最小高度，不包含瀏覽器導航欄高度。

:has()

可以用來表示具有某些子元素的父元素：

.parent:has(.child) {
}

表示選中那些有用 .child 子節點的 .parent 節點。

即將支持的特性

@scope

可以讓某個作用域內樣式與外界隔絕，不會繼承外部樣式：

@scope (.card) {
  header {
    color: var(--text);
  }
}

如上定義后，.card 內 header 元素樣式就被確定了，不會受到外界影響。如果我們用 .card { header {} } 來定義樣式，全局的 header {} 樣式定義依然可能覆蓋它。

樣式嵌套

@nest 提案時 css 內置支持了嵌套，就像 postcss 做的一樣：

.parent {
  &:hover {
    // ...
  }
}

prefers-reduced-data

@media 新增了 prefers-reduced-data，描述用戶對資源占用的期望，比如 prefers-reduced-data: reduce 表示期望僅占用很少的網絡帶寬，那我們可以在這個情況下隱藏所有圖片和視頻：

@media (prefers-reduced-data: reduce) {
  picture,
  video {
    display: none;
  }
}

也可以針對 reduce 情況降低圖片質量，至于要壓縮多少效果取決于業務。

自定義 media 名稱

允許給 @media 自定義名稱了，如下定義了很多自定義 @media：

@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

我們就可以按照自定義名稱使用了：

@media (--OSdark) {
  :root {
    …
  }
}

media 范圍描述支持表達式

以前只能用 @media (min-width: 320px) 描述寬度不小于某個值，現在可以用 @media (width >= 320px) 代替了。

@property

@property 允許拓展 css 變量，描述一些修飾符:

@property --x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

上面的例子把變量 x 定義為長度類型，所以如果錯誤的賦值了字符串類型，將會沿用其 initial-value。

scroll-start

scroll-start 允許定義某個容器從某個位置開始滾動：

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snapped

:snapped 這個偽類可以選中當前滾動容器中正在被響應的元素：

.card:snapped {
  --shadow-distance: 30px;
}

這個特性有點像 IOS select 控件，上下滑動后就像個左輪槍一樣轉動元素，最后停留在某個元素上，這個元素就處于 :snapped 狀態。同時 JS 也支持了 snapchanging 與 snapchanged 兩種事件類型。

:toggle()

只有一些內置 html 元素擁有 :checked 狀態，:toggle 提案是用它把這個狀態拓展到每一個自定義元素：

button {
  toggle-trigger: lightswitch;
}
button::before {
  content: " ";
}
html:toggle(lightswitch) button::before {
  content: " ";
}

上面的例子把 button 定義為 lightswitch 的觸發器，且定義當 lightswitch 觸發或不觸發時的 css 樣式，這樣就可以實現點擊按鈕后，黑臉與黃臉的切換。

anchor()

anchor() 可以將沒有父子級關系的元素建立相對位置關系，更詳細的用法可以看 CSS Anchored Positioning。

selectmenu

selectmenu 允許將任何元素添加為 select 的 option：

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

還支持更復雜的語法，比如對下拉內容分組：

<selectmenu class="my-custom-select">
  <div slot="button">
    <span class="label">Choose a plant</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <button behavior="button"></button>
  </div>
  <div slot="listbox">
    <div popup behavior="listbox">
      <div class="section">
        <h3>Flowers</h3>
        <option>Rose</option>
        <option>Lily</option>
        <option>Orchid</option>
        <option>Tulip</option>
      </div>
      <div class="section">
        <h3>Trees</h3>
        <option>Weeping willow</option>
        <option>Dragon tree</option>
        <option>Giant sequoia</option>
      </div>
    </div>
  </div>
</selectmenu>

總結

CSS 2022 新特性很大一部分是將 HTML 原生能力暴露出來，賦能給業務自定義，不過如果這些狀態完全由業務來實現，比如 Antd <Select> 組件早已實現自定義下拉選項與樣式，既然 HTML 沒有提供自定義能力，就按照其交互用 DIV + JS 模擬一套實現出來，定制空間更大。但也有很多能力依賴瀏覽器實現，或者本身更適合實現在 CSS 側。