從蘋果BigSur官網學點東西

汪氵淼發表於2020-12-19
蘋果

從蘋果BigSur官網學點東西

Awsome配色

這個 藍紫漸變大底 + 簡潔的 矩形狀字塊 + 粗細層次字形，看著就蠻舒服。

看看css配色：

.section-hero div[data-component-list="HeroComponent"] {
    top: 0;
    width: 100%;
    background: #2e1d7d;
    background: -webkit-radial-gradient(circle, #2e1d7d 0%, #050939 80%);
    background: radial-gradient(circle, #2e1d7d 0%, #050939 80%);
    will-change: transform;
}

可以看到以下幾點內容：

  • background 回退
  • 中心漸變，突出中心MBP產品
  • 優雅配色 #2e1d7d 0%, #050939 80%

動畫組合

蘋果官網的產品非常重視這樣一個過程，手機/平板/電腦上的元件放縮拼合在其螢幕上

這些元件構成有以下一個特點：

  • 每個元件的圖片由一個figure標籤包裹
  • 有一套精準的 transform: matrix 6引數控制的二維動畫
  • 有完善的回退機制，如果不支援這些figure，有一張合好元件圖片的底圖作為最後一級回退
標籤一般用於盛裝獨立的流內容（影像、圖表、照片、程式碼等等），如果被刪除，不應對文件流產生影響。

小圖示旋轉

.modal-toggle:checked ~ .grid-modal .modal-cta {
    background-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
    transition: background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
    transition: transform .66s cubic-bezier(0.66, 0, 0.2, 1),background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1);
    transition: transform .66s cubic-bezier(0.66, 0, 0.2, 1),background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
}

.grid-modal .modal-cta {
    position: absolute;
    bottom: var(--postion);
    right: var(--postion);
    height: var(--reset-size);
    width: var(--reset-size);
    z-index: 10;
    cursor: pointer;
    background-color: rgba(110,110,115,0.95);
    border-radius: 100%;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
    transition: background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
    transition: transform .66s cubic-bezier(0.66, 0, 0.2, 1),background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1);
    transition: transform .66s cubic-bezier(0.66, 0, 0.2, 1),background-color .66s 0s cubic-bezier(0.66, 0, 0.01, 1),-webkit-transform .66s cubic-bezier(0.66, 0, 0.2, 1);
}

有以下學習點：

  • transition中合入 transform、background-color以及回退內容
  • cubic-bezier(0.66, 0, 0.2/0.01, 1) 的引數調教，0.66s核心引數。
  • icon構成：<label><svg><span></label>。小icon都是全路徑繪製，定製性強。相對圖片不用請求資源，相對base64更直觀以及修改性高
  • 轉換前icon 灰底色+白路徑，轉換後 白底色+透明路徑。與背景圖一定形成高對比。

(0.66, 0, 0.2, 1) 可看成三段式：轉換前（長慢）、轉換（短快）、轉換後（長慢）。場景切換被設定在很短時間，轉換前後的時間佔比長，動畫效果明顯。

最後

LESSISMORE

相關文章