第四部分 高级

第十一章 背景阴影和混合模式

如何设计精致 ui，更好的观感

了解设计的具体规则

渐变

• background-image——指定一个文件或者生成的颜色渐变作为背景图片。
• background-position——设置背景图片的初始位置。
• background-size——指定元素内背景图片的渲染尺寸。
• background-repeat——决定在需要填充整个元素时，是否平铺图片。
• background-origin——决定背景相对于元素的边框盒、内边距盒（初始值）或内容盒子来定位。
• background-clip——指定背景是否应该填充边框盒（初始值）、内边距盒或内容盒子。
• background-attachment——指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。注意，使用 fixed 值会对页面性能产生负面影响。
• background-color——指定纯色背景，渲染到背景图片下方。

linear-gradient函数定义角度颜色

角度单位

角度 0 度两个颜色时，是从下往上渐变，旋转正数是顺时针旋转，所以 90 度的时候从左到右变

• rad——弧度（radian）。一个完整的圆是 (2\pi) 弧度，大概是 6.2832 弧度。
• turn——代表环绕圆周的圈数。一圈相当于 360 度（360deg）。可以使用小数来表示不足一圈，比如 0.25turn 相当于 90deg。
• grad——百分度（gradian）。一个完整的圆是 400 百分度（400grad），100grad 相当于 90deg。

条纹

同一个位置两个不同颜色节点

重复渐变：

 .fade {
      height: 1em;
      width: 400px;
      background-image: repeating-linear-gradient(-45deg,

        #57b, #57b 10px, #148 10px, #148 20px);
      border-radius: 0.3em;

}

更多实例 css-tricks

重复的时候抬头repeating-

径向渐变

从点扩展至全方位

radial-gradient();

![[Pasted image 20240803210735.png]]

阴影

box-shadow & text-shadow
box-shadow: 水平偏移量（左到右） 垂直偏移量（上到下）模糊半径 扩展半径 阴影颜色

insert关键字使得阴影朝内部，多个阴影用逗号隔开

两个设计方向：拟物化设计 扁平化设计

渐变和阴影

渐变和阴影可以以各种各样的方式组合使用。随着时间的推移，又会有新的设计流行起来。我们要做的是，在看到某个网站上的新设计时，停下来花些时间，用浏览器的开发者工具检查一下，看看这是如何实现的。不要觉得麻烦哦，见多才能识广。

混合模式

background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);

多个图片使用时前面会渲染在上面

 .blend {
        min-height: 400px;
        background-image: url(images/bear.jpg), url(images/bear.jpg);
        background-size: cover; （contain则是缩）
        background-repeat: no-repeat;
        background-position: -30vw, 30vw;
        background-blend-mode: multiply; %% 应用混合模式 %%

}

混合模式用处

can i use

• 使用某种颜色或者渐变为图片着色；
• 为图片添加纹理效果，比如划痕或者老胶片放映时的颗粒感等；
• 缓和、加深或者减少图片的对比度，使图片上的文字更具可读性；
• 在图片上覆盖了一条文字横幅，但是还想让图片完整显示。

background-blend-mode

着色

 .blend {
        min-height: 400px;
        background-image: url("images/bear.jpg");
        background-color: #148;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-blend-mode: luminosity;

}

明度混合：使用背景色的颜色和照片的明度；各种混合取决于哪个图层在哪个上面

书本 11.3.2 有各种混合模式

纹理

.blend {  
min-height: 400px;  
background-image: url("images/scratches.png"), url("images/bear.jpg"); 
background-size: 200px, cover;  
background-repeat: repeat, no-repeat;  
background-position: center center;  
background-blend-mode: soft-light;

}

soft-light 模式对于暗色系纹理图效果很好，而 hard-light 和 overlay 模式更适用于亮色的纹理图片（如果纹理图放在主图片下面则恰好相反）。然而实际应用效果可能需要根据具体情况进行调整。

融合混合模式

mix-blend-mode

不仅混图片，还混合文字等

可以实现图片上的透明文字

   <div class="blend">
      <h1>Ursa Major</h1>

</div>

  .blend {
      background-image: url("images/bear.jpg");
      background-size: cover;
      background-position: center;
      padding: 5em 0 10em;

}

.blend > h1 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6rem;
  text-align: center;
  mix-blend-mode: hard-light;
  background-color: #c33;
  color: #808080;
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}

文字渐变

webkit 渐进增强

第十二章 对比、颜色和间距

像设计师一样思考

对比最为重要

为了有对比，页面必须首先建立模式和规则，只有先有规则才可能打破规则。使用模块化 css 保证统一性

使用不同的颜色 间距 大小来创造对比

设计师的工作是让最重要的信息凸显出来

建立模式

还原设计稿

颜色

主色，将主色和延伸颜色指定为变量

html {
      --brand-green: #076448;
      --dark-green: #099268;
      --medium-green: #20c997;
      --text-color: #212529;
      --gray: #868e96;
      --light-gray: #f1f3f5;
      --extra-light-gray: #f8f9fa;
      --white: #fff;

      box-sizing: border-box;

      color: var(--text-color);
    }

    *,
    *::before,
    *::after {

      box-sizing: inherit;
    }

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.4;
  background-color: var(--extra-light-gray);

为每种颜色 指定变量

}

h1, h2, h3, h4 {
  font-family: Georgia, serif;

}

a{  
color: var(--medium-green);

}  
a:visited {

  color: var(--brand-green);
  }  
a:hover {

  color: var(--brand-green);
}

a:active { }

布局；颜色字体；间距

cta 按钮 有意召唤行动

双容器模式

内边距定位

%% flex等宽 %%
.tile-row {
      display: flex;
}
.tile-row > * {
flex: 1; 
}

颜色表示法

rgb 法不如 hsl 直观 因为前者没有明度

hsl 色相，饱和度，明度，透明度 0~1

HSL Color Picker

转换颜色

推荐转换为 hsl 观察颜色 可以简单知道色相，然后添加衍生颜色

添加新颜色

色相环

• 找补色：色相环的对侧

  使用hsl时，色相值-180或者+180 就是补色，hsl0~180红黄绿，180~360 蓝紫红

如果你想更深入地研究颜色选择，可以上网浏览颜色理论相关的文章。你可以从 Natalya Shelburne 所写的这篇著名的文章 "Practical Color Theory for People Who Code" 开始。

字体

字体颜色

颜色 不是黑色而是深灰色

 --text-color: hsl(210, 11%, 15%);

纯白加纯黑文字=狗屎设计

WCAG=Web内容无障碍指南

WCAG 定义的大号文本，是指未加粗的 18pt（24px）及其以上的文本，或者加粗的 14pt（18.667px）及其以上的文本。也就是说，正文字体应达到或者超出普通文本建议的对比度，标题文本应达到或者超出大号文本建议的对比度。

Css 颜色对比检查器（）CSS color contrast checker
对比检查

纤细字体需要更多的字重感知到的对比度才合理

字体间距

em 还是 px

相对单位还是绝对单位？
响应式字体

font-size: calc(0.5em+1vw);  加上vw可以随视窗变化而变化

如果font-size 默认16px 那么10px间距=10/16 em=0.625em

内外边距的判断看是应用到父元素的内部还是目标元素的外部

行高如何影响垂直间距

文字之间的行高会影响垂直的间距，比如说外边距 30px 加上行高居然会变成快 36px

文字高度是不带行高的，行高会另算 尤其是垂直居中的情况

网页里的行高

网页里的行高是 1.4，这是从<body>元素上设置并继承下来的。这样只有一行文字的元素，内容盒子的高度就是 1.4em。文字在内部垂直居中，字号是 16px，内容盒子的最终高度就是 22.4px。额外的 6.4px 平均分配到文字的上方和下方。

解决办法是在内容盒子外边距里减掉算出来的间距

[font-size*1.4px-(font-size)] / 2 =上下各有？px行高

目标间距-已有行高=真实设置间距

为行内元素设置间距

例如：标签的微型布局

方法：flex 或者行内元素

这里讲行内元素 display: inline;

行列表项的高度:

每一行列表项的灰色背景会和另一行的列表重叠，原因在于行高。前面讲到过，文本行的高度是由行高乘以字号决定的。如果为行内元素添加内边距，元素本身会变高，却不会增加文本行的高度。文本行的高度只由行高来决定。

行内元素同元素换行的时候可以折行但是 flex 不行整个元素直接换一行 个人觉得 flex 合理一点

**rem设置字号 px设置边框(或者rem) em设置其他**

字号要用 rem 设置

我们的目的是让用户的注意力被吸引到该被吸引的地方，其他的信息则做减法，所以调配资源使得注意力分布合理很重要，这就是为什么对比这么重要！对比是在帮用户筛选信息

意外的是，原来 hsl 这么好用！

第十三章 排版

关键词：web 字体，谷歌字体 api，字间距，性能

网页设计，成也字体败也字体，web 字体使用@font-face 告诉浏览器去哪找字体，字体改变网站氛围

web 字体

常见的在线服务：

• Typekit
• Webtype
• 谷歌字体 <- free

标题与正文使用不同字体，或者不同字重

serif 和 sans-serif

一种有衬线，也就是英文字末端有爪，另一种是圆润的

字体是字型=typeface中确定字重等的一种

谷歌字体

1. 找到字体
2. 挑选字重
3. 只挑选需要的，为了性能
4. 在清单里选择并获得 href 地址
5. 在 html link 标签添加地址
6. 使用 font family 指定使用字体

@font-face

一个例子

输入上面获得的 href 的链接获得谷歌字体的 css

/* latin */
@font-face {
  font-family: 'Sansita';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sansita/v11/QldLNTRRphEb_-V7JLmXWX5-w4dsz_k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

字体格式与回退处理

WOFF=web 开放字体 有些浏览器可能不支持 WOFF2 此时回退

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"),

}

url(https://example.com/roboto.woff2) format('woff2'),
url(https://example.com/roboto.woff) format('woff');

字型的变体

  /* latin */
    @font-face {

      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), local('Roboto-Light'),

           url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-
         tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');

font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'),

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}
...
/* latin */
@font-face {

url(https://fonts.gstatic.com/s/roboto/v15/d-
6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

使用@font-face 可以定义浏览器需要的字体的格式 比如 bold 具体是什么

字距与可读性

涉及两个属性：line-height letter-spacing

分别管理垂直和水平的间距

正文主题的字间距

line-height: normal; 是默认初始值 大约是 1.2 （行高不带单位） 左右

行高一般设置1.4~1.6之间，文字行越长，行高应该越大。每行文字长度在45~75个字符

letter-spacing 一般一次增加 1em 的百分之一 0.01em

letter-spacing: 0.01em;

设计常用 pt 把 pt 转为行高的无单位比例数字：

具体行距pt*1.33/16px(这是字号)=无单位行高值

算字距一般除以 1000

标题、小元素和间距

标题

大字体行高可能小于 1.4 更合适 长标题有时候会有问题 排长强制换行测试

标题的字间距可以稍宽 0.03em；也可以使用负间距 -0.02em

小元素

减小字号 改内边距 对齐方式 大小写等
.top-nav a {
  display: block;
  font-size: 0.8rem;
  padding: 0.3rem 1.25rem;
  color: var(--white);
  background: var(--brand-green);
  text-decoration: none;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;

}

垂直规律排版：

使用基线网格，行之间距离相等。使用各种规格的元素，但是垂直上排列有序

垂直规律需要行高标明单位，这意味着所有字号改变的地方必须明确设有行高。

FOUT 和 FOIT

浏览器加载字体：首先使用可用的系统字体然后渲染指定的 Web 字体。有时时间太长渲染后页面变化导致不好的体验=FOUT 无样式文本闪动 Flash Of Unstyled Text

后来浏览器为了满足开发者，修改了渲染的方式，使得文字渲染不可见而首先渲染其他的要素。这导致新的问题 FOIT= Flash Of Invisible Text 这次的问题是如果渲染字体不可用那么网页会出现文字位置的空白，终究没有意义。甚至不如回退处理。

书里的解决方案：使用 js 或者新的 css 属性来控制字体加载

使用 Font Face Observer（js）

使用Font Face Observer 的库

在字体准备好时，使用 js 创建 fonts-loaded 类，使用这个类控制字体加载和渲染

先下载fontfaceobserver.js 文件，保存到和页面相同的目录下。然后添加代码到页面底部 body 闭合前

<script type="text/javascript">
      var html = document.documentElement;
      var script = document.createElement("script");
      script.src = "fontfaceobserver.js";
      script.async = true;

%% 为要加载的字体创建观察器 %%
      script.onload = function () {
        var roboto = new FontFaceObserver("Roboto");
        var sansita = new FontFaceObserver("Sansita");
        var timeout = 2000;

        Promise.all([
          roboto.load(null, timeout),
          sansita.load(null, timeout)

        ]).then(function () {
          html.classList.add("fonts-loaded");

        }).catch(function (e) {
          html.classList.add("fonts-failed");
%% 检查是否加载成功 %%

});

      document.head.appendChild(script);
    </script>

在前端开发中，polyfill 是一种代码或插件，旨在为旧版本的浏览器或不支持某些现代功能的浏览器提供功能补充。它允许开发人员使用最新的 web 标准和 API，而不必担心这些功能在用户的旧浏览器中无法使用。

使用 font-loaded 类和 font-failed 类控制字体表现

回退

1. css 里使用回退字体 然后 font-loaded 选中改为 Web 字体（FOIT 改为 FOUT）
2. css 用 Web font-failed 类用回退字体 依然会有 FOIT 但是超时转为系统字体<-推荐

%% 使用Web字体 %%
body{
  margin: 0;
  font-family: Roboto, sans-serif;
  line-height:1.4;
  letter-spacing: 0.01em;
  background-color: var(--extra-light-gray);
}

%% 处理failed改成系统字体 %%
.fonts-failed body {
  font-family: Helvetica, Arial, sans-serif;

}

h1, h2, h3, h4 {
  font-family: Sansita, serif;
  letter-spacing: 0.03em;

}
.fonts-failed h1,
.fonts-failed h2,
.fonts-failed h3,
.fonts-failed h4 {

  font-family: Georgia, serif;
}

...
.home-link {

  color: var(--text-color);
  font-size: 1.6rem;
  font-family: Sansita, serif;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;

}
.fonts-failed .home-link {

  font-family: Georgia, serif;
}

font style matcher 网站帮助调整字体变更后间距等的调整

解决 FOUC= Flash Of Unstyled Content 问题

font-display

font-display 一个新的 css 属性
font-display支持的属性：

• auto=FOIT
• swap=FOUT
• fallback=较短时间 FOIT 后 FOUT
• optional=如果 Web 字体搞得太慢了就不显示了

 @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      src: local("Roboto Light"), local("Roboto-Light"),

           url(https://example.com/roboto.woff2) format('woff2'),
           url(https://example.com/roboto.woff) format('woff');

  font-display: swap; %% 立即显示回退字体然后交换为Web字体 %%
}

延伸内容：Web Performance in Action

第十四章 过渡 transition

过渡可以吸引用户的注意力 过渡的本质是让属性的一个值"移动到"另一个值

transition 属性

• transition-property：指定对于哪些属性使用过渡 all=所有
• transition-duration：过渡占有的时长

元素属性任何时候发生变化都会触发过渡，比如 hover 等情况。始终把过渡属性放在一直能选择到元素的选择器里。过渡属性本身通常不随元素状态变化而变化。

transition: 对应属性 持续时间 定时函数 延迟时间，(下一个对象);

时间必须添加单位 0.3s 或者 300ms

定时函数

我自己的理解，定时函数决定变化的过程，说明属性是如何“移动”的。书上说是决定中间值的计算。

• linear: 固定值
• ease-in: 逐渐加速
• ease-out: 逐渐减速
• steps () 分步

为了性能，有些属性最好避免使用transition 比如left等

自定义-贝塞尔曲线

流畅过渡：定时函数的前三种

浏览器使用贝塞尔曲线作为随着时间变化的函数来计算某个属性的值

可以在 Chrome 开发者工具里修改贝塞尔曲线 在 css 属性里面

cubic-bezier(0,0,0,0); 四个参数前2后2分别对应两个控制点的xy坐标

哪种曲线何时是有用的？
应该复用减速，加速，线性linear曲线，使得体验统一

线性：颜色变化和淡入淡出效果

减速：用户发起的变化，比如点按按钮或者hover，获得快速反馈

加速：系统发起的变化，内容加载或者超时触发等，慢慢引起注意

延伸：cubic-bezier 在线编辑

steps () 分步

非流畅过渡 分步完成 需要 2 个参数=次数+变化发生在步骤的开始还是结束，第二个参数默认是 end

延伸：clever uses for step easing

分步最常用的是做 类似翻页动画的效果 帅！

还有进度条啥的

非动画属性

下拉菜单的过渡效果

详见 vscode 第十四章 code 大部分过渡时间应该介于 200ms 和 500ms 之间，小动作快，弹跳等大动作稍慢

不可添加动画效果的属性

display 只有 0 或 1 没有过渡 MDN 文档可查那些属性有动画的条件，因为 display 没有动画，所以可用不透明的动画效果代替，来做淡入淡出等

淡入淡出

注意，使用不透明度时，元素只是不显示了，不是收缩进去了，这意味着元素还在原来的位置上挡着其他元素，所以会导致页面不正常工作。说人话就是如果只设置不透明度的过渡，盖在那个元素下面的东西就点不到了。需要呢在不可见的时候移除掉。

`visibility: visible/hidden;` 属性，可以用于移除元素。它支持 transition-delay 注意可见性的值不是 0 和 1 是 visible 和 hidden，hidden 的时候不会盖住下面的元素

visibility 是从可见页面移除元素，无法移除其在文档流里的位置和排版，但是！只要绝对定位脱离文档流，就可以不用担心了。

过渡到自动高度

另一种打开下拉菜单的办法：使用高度的过渡，配合 overflow 0- >渲染后的高度（使用 js）

`display:none;时 scrollHeight为0`

过渡有时候需要 js 和 css 配合捏。

第十五章 变换 transform

transform改变页面元素的形状和位置

旋转，平移，缩放和倾斜

`transform:rotate(90deg);`

• rotate 旋转
• translate 平移
• scale 缩放
• skew 倾斜

transform 不会脱离文档流 这意味着元素原来的位置不会被其他元素占用，而且会可能发生遮盖 要留足提前量

transform不能作用在行内元素上

更改变换基点

`transform-origin: right bottom;`

`keyword: top right left bottom center 也可以用百分比或者带单位去描述`

使用多重变换

指定多个变换 中间空格隔开

`transform: rotate(15deg) translate(10px, 20px);`

在运动中变换

实现左侧导航菜单

使用 svg 格式图片-可缩放矢量 可以缩放到任意大小

使用背景渐变在 body 类里改效果的时候 为了铺满最小视窗 `min-height` 应该要 100vh

fixed 不受滚动影响 一直在那个位置 适合菜单等需要一直显示的东西

使用变换不会改变原来排列布局，因为边距等都不会变 只是元素本身变一下

因此放大图标不是改变它的宽高 而是用 svg 缩放实现

图标技术：

• 精灵图 把所有图标放入单个图标文件 调整背景图片位置来显示某个图标
• 图标字体 icon fonts 把图标作为字符放入 然后 Web 字体渲染
• svg 图标 基于 xml 文件格式 在 html 直接使用 可作为 img 来源，直接使用指的是 `<svg>然后<path>` css 还可以改变 svg 里的部分

延伸：using-svg

使用 svg 文件做背景图的时候需要额外设置 `background-size` 和上层图片一样大 不然显示不对

位置的定位和移动直接用 transform做, transition 一开始状态的定位也直接用 transform 定位

弹跳特效

transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3),

opacity 0.3s ease-out;

交错显示过渡

`transiton-delay`

使用 `nth-child(n) ` 来按顺序选中子类 然后分别按照顺序延时不同的时间

动画性能

transform 是一个性能很好的选择 比 transition 和 animation 要好

渲染路径

三阶段：布局-绘制-合成

布局

计算各个元素的大小位置和相互关系

任何时间改变任一个元素的大小或者位置都需要重新对整个页面进行计算，也就是重排 删除或者添加元素也会

绘制

绘制就是在电脑的内存里对各个元素进行像素的绘制，包括文本图像颜色阴影什么的，那么这时候只对那一个元素进行计算。此外有图层的概念，可以把对应绘制图层放到 GPU 里单独计算，也就是硬件加速，这样占用更多内存，但是速度更快

合成

把绘制好的所有图层合成到计算机屏幕上显示

transform 等之所以快是因为只对对应图层修改 在 gpu 里加速 不需要对所有图层重新绘制

由于一般来说 1s 刷新 60 次 也就是绘制六十次的话，每次的计算量小对整体提升很大

`will-change:transform;` 提前告知计算机元素的什么属性需要变化了，来对渲染图层添加控制 来使用 gpu 加速，但是这会占用很多资源

3D 变换

`translateZ()` `rotateX()` `rotateY()`

rotate 默认是照着 Z 轴旋转的

控制透视距离

透视距离=摄像机和场景之间的距离

透视距离越近 3d 效果越明显

反之越不明显

`perspective: 400px;`

两种指定透视距离的方式

1. perspective() 变换 = 为单个元素设置
   例子 `transform: perspective(200px) rotateX(30deg);` 就像是为每个元素单独拍照 然后照片并排放在一起
2. perspective 属性 = 为父容器设置后，建立统一透视距离
   例子 就像是一群人一起拍照 共享一个透视距离 一个相机

   
   .row {
     display: flex;
     justify-content: center;
     perspective: 200px;

}

为容器添加 透视距离

.box {
box-sizing: border-box;
width: 150px;
margin: 0 2em;
padding: 60px 0;
text-align: center;
background-color: hsl(150, 50%, 40%);
transform: rotateX(30deg);
%% 这里就不再需要定义透视距离 %%
}

### 高级 3d 变换

实际开发中好像用得不多

`perspective-origin: ;`

`backface-visibility: hidden;` ->应用场景：两个卡片合在一起 卡片翻转特效

延伸：Intro to CSS 3D Transforms 
- [ ] 阅读这篇文章 (@2024-08-21) 

`transform-style(preserve-3d)`

延伸：Ana Tudor 在 DWB 网站写的教程

# 第十六章 动画 animation

通过关键帧动画 实现比过渡更为精确多样的控制

定义关键帧以后，浏览器自动填充剩下的帧图像

动画可以向用户传递有意义的反馈

两个部分

定义动画 `@keyframes`

添加动画 `animation`

animation 简写的几个属性：

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-iteration-count`

如果重复多次需要考虑初始值和结束值匹配

出现动画时，动画的属性在样式层叠中具有更高的优先级，而当动画结束会回到**原来的**属性设置 比如绿色背景在动画如果设置其他颜色，就不会是绿色，但是动画结束会立刻回到绿色

## 3D 变换的动画

考虑布局的时候优先实现移动端布局，然后一步步加上复杂的布局，做响应式一定要先检查 head 里有没有 不然拿不到设备的视口

```html

移动端-flex-grid

在 1000px 左右的视口下，这个 flex 布局的显示是不正常的，所以再加 grid 解决

@support (display:grid){} 使用 @support 查询，如果浏览器支持这个属性就应用

对图片使用 max-width:initial; 来重置最大宽度
initial值

为布局添加动画 （3d 飞入）

3d布局

xy 轴都在电脑平面上 x 横着 z 轴垂直于电脑平面

添加飞入 3d 动画需要 translateZ 和 rotateY 在那之前需要先确定透视距离和关键帧

在容器上设置透视距离 使得所有元素共享一个摄像机 在运动过程中通过关键帧 在中途插入状态来定义接近的速度和旋转变化的幅度 以及不透明度的变化

动画延迟和填充模式

animation-delay:;

animation-fill-mode:;

• backwards
• forwards
• none
• both
  由于教材上不透明度应用在动画里，所以一开始不透明度是 1 再变成 0 再变成 1 比较尴尬 要把动画样式 向后填充 就像暂停在第一帧那样

向后填充：更接近开始的时候 在动画执行之前浏览器会读出动画开始第一帧的状态直接应用上去

向前填充：浏览器读出最后一帧状态，一直应用下去

通过动画传递意图

动画的意义：通过 ui 反馈给用户信息，他们的操作确实符合他们的预期

反馈用户操作

反馈一个加载动画 把边框画成月牙的伪元素 让它转起来=css 动画

吸引用户注意

摇动元素引起注意

动画可以重复多次不同位置调用，建议是都写在一块，比如都放在最后

js 可以控制动画的播放 也有专门控制 css 动画的 api 可以参考 mdn 的 animation

延伸：不错的动画库animista

验证一个想法 focus 伪类是不是更适合手机屏幕

附录 A 选择器

基础选择器

组合器

伪类选择器

伪元素选择器

属性选择器

a[attr="value"] {}

附录 B 预处理器

原理：把源文件（我们写的自定愿意）转译为输出文件（常规 css 样式表）

预处理器不会添加任何新特性，只是做一个翻译的过程，让人写的时候可以写更具有语义的 code

种类：Sass Less

例如定义 $brand-blue 变量 替换 #0086b3

Sass

推荐 LibSass

Sass 可以对变量进行运算

对颜色处理的延伸：A Visual Guide to Sass & Compass Color Functions

@for 迭代

Sass 我劝你学！

性能

使用 Autoprefixer 保证兼容性

使用 gzip 压缩

在 Sass 中更多使用@extend

自学补充

css画三角形