从苹果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

从苹果BigSur官网学点东西的更多相关文章

  1. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  2. 如何评价苹果中国官网 iOS 8 介绍页面的文案「开发者的大事、大快所有人心的大好事」?[转自知乎]

    在什么是「苹果式中文」答案中,小七得出了这个结论: 「苹果式中文」是指句子结构破碎,经常缺乏主语,滥用排比,顶真,偏正短语,和不恰当四字词的广告文体. (有关什么是苹果式中文,小七原来贴错地方了TAT ...

  3. 如何从sun公司官网下载java API文档(转载)

    相信很多同人和我一样,想去官网下载一份纯英文的java API文档,可使sun公司的网站让我实在很头疼,很乱,全是英文!所以就在网上下载了别人提供的下载!可是还是不甘心!其实多去看看这些英文的技术网站 ...

  4. 官网类原型模板分享——Apple

    苹果公司是美国一家高科技公司,引领全球数码产品设计潮流,是世界最具价值的品牌. 此原型正是取自苹果公司官网,网站主要以展示产品为主,排版方式采用大图配简练的文字,清爽简洁的同时突出产品优势,增大产品的 ...

  5. 新型钓鱼手段预警:你看到的 аррӏе.com 真是苹果官网?

    研究人员发现一种"几乎无法检测"的新型钓鱼攻击,就连最细心的网民也难以辨别.黑客可通过利用已知漏洞在 Chrome.Firefox 与 Opera 浏览器中伪造显示合法网站域名(例 ...

  6. 验证Xcode真伪的方法,来自苹果官网

    验证Xcode真伪的方法,来自苹果官网   Xcode的验证你的版本 2015年9月22日    注意:中文为有道翻译,看下验证方法即可.   我们最近将应用程序从应用程序商店,还建有Xcode的假冒 ...

  7. 如何在苹果官网下载旧版本的Xcode

    如何在苹果官网下载旧版本的Xcode 前段时间XcodeGhost事件让很多应用中招,不乏一些知名的互联网公司开发的应用.事件的起因是开发者使用了非官方的Xcode,这些Xcode带有xcodegho ...

  8. (0)资料官网【从零开始学Spring Boot】

    Spring Boot官网:http://projects.spring.io/spring-boot/ Eclipse官网:http://www.eclipse.org/ Maven官网:http: ...

  9. Threejs 官网 - 怎样执行本地的东西(How to run things locally)

    Threejs 官网 - 怎样执行本地的东西(How to run things locally) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循&qu ...

随机推荐

  1. netsniff使用

    1 netsniff安装与使用 首先直接下载源码包进行部署 安装一些前置包(安装完成的自动忽略) sudo apt install pkg-config sudo apt install libcli ...

  2. ppt-页面大小和颜色更改

    1.ppt大小设置:设计--幻灯片大小--可选择标准.宽屏或自定义幻灯片大小--下拉 幻灯片大小可选择其他尺寸的幻灯片 2.设置图片背景 设计--设置背景格式--依次有纯色.渐变.图案等填充 2.1 ...

  3. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  4. [C#.NET 拾遗补漏]13:动态构建LINQ查询表达式

    最近工作中遇到一个这样的需求:在某个列表查询功能中,可以选择某个数字列(如商品单价.当天销售额.当月销售额等),再选择 小于或等于 和 大于或等于 ,再填写一个待比较的数值,对数据进行查询过滤. 如果 ...

  5. mysql 分组查询

    mysql 分组查询 获取id最大的一条 (1)分组查询获取最大id SELECT MAX(id) as maxId FROM `d_table` GROUP BY `parent_id` ; (2) ...

  6. python批量爬取猫咪图片

    不多说直接上代码 首先需要安装需要的库,安装命令如下 pip install BeautifulSoup pip install requests pip install urllib pip ins ...

  7. CentOS下构建Shell简易分发系统

    bash经典收集 经典收集1 for f in `(cd .; find suite -type f | grep -v SCCS)`; \ do \ d=/usr/local/mysql/mysql ...

  8. CentOS6.5上增加中文字体库,确保前端WEB可以正常显示

    1 下载字体 可以在网上下载,也可以在 windows 目录下(C:\Windows\Fonts)找到对应字体,这里是从另一套系统上 copy simsun.ttf 文件. 2 查看当前系统中已安装的 ...

  9. Beta冲刺随笔——Day_Ten

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 今日事今日毕 林涛: ...

  10. rest-framework:频率控制

    一 频率简介: 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则: 自定义的逻辑 #(1)取出访问者ip # (2)判断当前ip不在访问字典里,添加 ...