从苹果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构成：。小icon都是全路径绘制，定制性强。相对图片不用请求资源，相对base64更直观以及修改性高

转换前icon 灰底色+白路径，转换后 白底色+透明路径。与背景图一定形成高对比。

(0.66, 0, 0.2, 1) 可看成三段式：转换前(长慢)、转换(短快)、转换后(长慢)。场景切换被设置在很短时间，转换前后的时间占比长，动画效果明显。

最后

LESSISMORE