一、内容结构

过渡
动画
变换
网格布局
其他与未来

二、文档及视频资源

w3school HTML 教程 w3school HTML 标签参考手册 MDN HTML 教程 MDN HTML 元素参考 w3school CSS 教程 w3school CSS 参考手册 MDN CSS 教程 MDN CSS 参考手册在线文档用于查阅参考资料

黑马程序员web前端开发入门教程尚硅谷Web前端零基础入门HTML5+CSS3基础教程在线视频学习资源用来辅助学习，上面两个是我个人觉得质量比较高的，二选一选择一个视频资源个人比较习惯的跟着学习即可

三、知识点总结

1. 过渡 transition

（1）简介

通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上，在 CSS3 中加入了一项过渡功能，通过该功能可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画

transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀，如果想兼容旧版本的浏览器那么可能需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)

transition一般在css中配合:hover, :active等伪类使用，实现相应等动画效果

（2）过渡应用属性 `transition-property` 属性

transition-property 属性规定应用过渡效果的 CSS 属性的名称

none 没有属性会获得过渡效果
all 默认值，所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

（3）过渡持续时间 `transition-duration` 属性

transition-duration 属性规定完成过渡效果需耗费的时间单位以秒或毫秒计，默认值0 该属性必须指定

（4）过渡持续效果 `transition-timing-function` 属性

transition-timing-function 属性规定过渡效果的速度曲线

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease 默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve），关于这个函数这里不作解释，可参考链接实际贝塞尔函数各参数取值效果可通过链接观察

（5）过渡延迟时间 `transition-delay` 属性

transition-delay 属性规定过渡效果开始的延迟时间默认值是0

（6）过渡简写属性 `transition` 属性

transition 属性是一个简写属性，用于同时设置四个过渡属性： transition-property、transition-duration、transition-timing-function、transition-delay

transition: all 2s ease 1s;

一般建议使用transition 属性一次性设置所有过渡属性

2. 动画 animation

（1）简介

动画和过渡类似，都可以通过纯 CSS 实现一些动态效果，不同的是过渡需要在某个属性变化时触发，而动画可以自动触发动态效果动画使元素逐渐从一种样式变为另一种样式

（2）关键帧 `@keyframes`规则

设置动画效果，必须先设置一个关键帧，关键帧设置了动画执行的每一个步骤，即指定每一步的属性变化 @keyframes规则有两种设置方式，如下所示

@keyframes move
{
  0%   {top:0px;}
  25%  {top:200px;}
  50%  {top:100px;}
  75%  {top:200px;}
  100% {top:0px;}
}

@keyframes mymove
{
  from   {top:0px; background:red; width:100px;}
  to {top:200px; background:yellow; width:300px;}
}

（3）动画名称 `animation-name` 属性

animation-name 属性为 @keyframes 动画规定名称该属性必须指定 默认值none，即无动画效果

（4）动画持续时间 `animation-duration` 属性

animation-duration 属性定义动画完成一个周期所需要的时间单位可以是秒或毫秒该属性必须指定 默认值0，即无动画效果

（5）动画延迟开始时间 `animation-delay` 属性

animation-delay 属性定义动画开始的延迟时间单位可以是秒或毫秒默认值是0 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画

（6）动画播放次数 `animation-iteration-count` 属性

animation-iteration-count 属性定义动画的播放次数默认值是1 取值可以是正整数或infinite（无限播放）

（7）动画播放方向 `animation-direction` 属性

animation-direction 属性定义是否应该轮流反向播放动画

normal 默认值，动画正常播放
alternate 动画轮流交替播放
reverse 动画反向播放
alternate-reverse 动画轮流反向交替播放

（8）动画播放控制 animation-play-state 属性 animation-play-state 属性规定动画运行还是暂停

paused 动画暂停
running 默认值，动画进行

（9）动画播放速度曲线 `animation-timing-function` 属性

animation-timing-function 属性规定动画的速度曲线

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease 默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

（10）动画播放时间外效果控制 `animation-fill-mode` 属性

animation-fill-mode 属性规定动画在播放之前或之后其动画效果 none 默认值，不改变默认行为 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） both 向前和向后填充模式都被应用。

（11）动画简写属性 animation 属性用于同时设置6个动画属性（除animation-fill-mode外） animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

语法：animation: name duration timing-function delay iteration-count direction;

animation:move 3s ease 1s infinite alternate;

建议使用animation属性一次性设置所有的动画属性

3. 变换 transform

（1）简介

变换是指通过 CSS 来改变元素的形状或位置，transform 属性应用于元素的2D或3D转换，可以将元素进行旋转，缩放，移动，倾斜等操作变换不会影响页面布局变换的实现原理是移动坐标轴，而不是元素本身

（2）`transform`属性

CSS变换 transform 属性提供了一些函数用于控制各种变换方式所有函数都应在 transform 属性中应用参考链接

（3）坐标轴

（4）平移 translate

将元素进行水平位移 translate(x,y) 定义 2D 平移 translate3d(x,y,z) 定义 3D 平移 translateX(x) 定义 x 轴上的平移 translateY(y) 定义 y 轴上的平移 translateZ(z) 定义 z 轴上的 3D 平移可以注意到元素2D平移效果类似于相对定位

（5）缩放 scale

对元素在指定坐标轴上分别进行缩放 scale(x,y) 定义 2D 缩放转换 scale3d(x,y,z) 定义 3D 缩放转换 scaleX(x) 通过设置 X 轴的值来定义缩放转换 scaleY(y) 通过设置 Y 轴的值来定义缩放转换 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换

（6）旋转 rotate

对元素进行旋转操作 rotate(angle) 定义 2D 旋转 rotate3d(x,y,z,angle) 定义 3D 旋转 rotateX(angle) 定义沿着 X 轴的 3D 旋转 rotateY(angle) 定义沿着 Y 轴的 3D 旋转 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转

（7）倾斜转换 skew

对元素进行倾斜的旋转 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换

（8）其他

perspective(n) 为 3D 转换元素定义透视视图 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵

（9）`transform-origin` 属性

transform-origin 属性控制变换元素的基准位置，即坐标轴原点位置

语法：依次指定 x 坐标、y 坐标、z 坐标

（10）`transform-style` 属性

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素

flat 子元素将不保留其 3D 位置
preserve-3d 子元素将保留其 3D 位置

（11）`backface-visibility` 属性

backface-visibility 属性定义元素不面向屏幕时，元素背面是否可见

visible 背面可见
hidden 背面不可见

4. 网格布局 - CSS Grid Layout Module

（1）简介

CSS 网格布局模块提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局关于网格布局，可以参考链接

（2）网格布局设置方法

当元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器，其中的最近子元素就会成为网格元素 display: grid``display: inline-grid

（3）基本概念

采用网格布局的区域，称为"容器"（container）容器内部采用网格定位的子元素，称为"项目"（item）

网格项的垂直线被称为列（column）网格项的水平线被称为行（row）每列/行之间的间隔称为间隙（gap）列之间的线称为列线（column lines），行之间的线称为行线（row lines），统称为线（line） 正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线 行和列的交叉区域，称为单元格（cell） 正常情况下，n行和m列会产生n x m个单元格

（4）网格容器

grid-template-columns 属性定义网格容器中各列的宽度及个数 grid-template-rows 属性定义网格容器中各行的高度及个数其值是以空格分隔的列表，其中每个值定义相应列的长度

.grid-container {
  /* 所有列有相同的宽度，使用auto关键字 */
  grid-template-columns: auto auto auto auto;
  /* 各行宽度不相同 */
  grid-template-rows: 80px 200px;
  
  /* 可以使用绝对单位，亦可使用相对单位 */
  grid-template-columns: 33.33% 33.33% 33.33%;
  
  /* 可以使用repeat()函数，简化重复的值或模式 */
  grid-template-rows: repeat(3, 33.33%);
  grid-template-columns: repeat(2, 100px 20px 80px);
  
  /* 可以使用auto-fill关键字表示自动填充 */
  grid-template-columns: repeat(auto-fill, 100px); 
      /* 如上代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列 */
  
  /* 可以用fr关键字控制各列与各行的比例关系 */
  grid-template-columns: 150px 1fr 2fr;
  		/* 如上代码表示第一列宽度150px，第三列宽度是第二列的2倍 */
  
  /* 可以使用minmax()函数控制列与行长度范围 */
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  
  /* 可以指定网格线的名称，同一根线允许有多个名字 */
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4 column-4];
}

justify-content 属性用于在容器内水平方向如何对齐整个网格 仅网格的总宽度小于容器的宽度时生效 align-content 属性用于垂直方向如何对齐容器内的整个网格 仅网格的总高度小于容器的高度时生效 以上两个属性作用可参考相应flex布局的作用 place-content属性是align-content属性和justify-content属性的简写属性语法： place-content:

justify-items属性设置单元格内容的水平位置（左中右） align-items属性设置单元格内容的垂直位置（上中下）以上两个属性作用可参考相应flex布局的作用 place-items属性是align-items属性和justify-items属性的合并简写形式语法： place-items:

grid-column-gap属性用于设置列间距 grid-row-gap属性用于设置行间距 grid-gap属性是以上两个属性的简写属性语法： grid-gap: ;

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

网格布局允许指定区域（area），一个区域由单个或多个单元格组成 grid-template-areas属性用于定义区域

.grid-container {
  /* 定名为a到i的九个区域 */
	grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
  
  /* 将9个单元格分成a、b、c三个区域 */
  grid-template-areas: 'a a a'
                       'b b b'
                       'c c c';
  
  /* 可以使用.表示不需要的单元格 */
  grid-template-areas: 'a . c'
                       'd . f'
                       'g . i';
}

另外需要注意的是，区域的命名会影响到网格线的名称

grid-auto-flow 属性控制自动放置的项目如何插入网格中默认值是row，即"先行后列" 也可以设成column，变成"先列后行" 可以设成row dense和column dense，用于处理部分项目指定位置后如何排列剩余项目位置

grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高实际取值要求同grid-template-columns 属性与grid-template-rows 属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的简写属性 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的简写属性

（5）网格项目

grid-column 属性定义将项目放置在哪一列上 grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性 grid-row 属性定义了将项目放置在哪一行上 grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性

.grid-item {
  /* 第 1 列开始并在第 5 列之前结束 */
  grid-column: 1 / 5;
  /* 从第 1 列开始，并跨越 3 列 */
  grid-column: 1 / span 3;
}

grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性，也可以规定项目的名称

/* 作简写属性 */
.grid-item {
  /* 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束 */
  grid-area: 1 / 2 / 5 / 6;
  /* 从 row-line 2 和 column-line 开始，并跨越 2 行和 3 列 */
  grid-area: 2 / 1 / span 2 / span 3;
}

/* 指定项目名称 */
/* 项目名称需在grid-template-areas属性中指定 */
.grid-item {
  grid-area: area;
}

justify-self属性设置单个单元格内容的水平位置，跟justify-items属性的用法类似 align-self属性设置单个单元格内容的垂直位置，跟align-items属性的用法类似 place-self属性是align-self属性和justify-self属性的合并简写形式

（6）实例

（i）中心居中效果

.box {
  display: grid;
  place-content: center;
  /* 代码非常简洁！*/
}

（ii）二栏布局

<div class="grid">
    <div class="left"></div>
    <div class="right"></div>
</div>

.grid{
	display: grid;
	grid-template-rows: 200px auto;       
}

（iii）三栏布局/圣杯布局

<div class="container">
  <header>
    Header
  </header>

  <aside>
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside>
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

.container {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-gap: 1em;
}
header, footer {
  grid-column: 1 / 4;
}
header,
aside,
article,
footer {
  background: #eaeaea;
  display: grid;
  place-content: center;
  height: 17vh;
}
@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}

5. CSS其他特性与CSS未来（介绍）

这一节内容是偏介绍性的，希望能够让大家了解到CSS即将出现或已出现的新特性可参考 CSS 发展状况报告亦可参考知乎文章

（1）CSS变量 var()函数

要实现全局CSS变量，需要在html或body或**:root伪类中声明自定义属性必须以--开头,使用 var()**来访问

:root{
  --colorRed:red;
  --size:16px;
  --h:35px;
  --l-h:35px;
}

a{
  display:block;
  height:var(--h);
  line-height:var(--l-h);
  color:var(--colorRed);
  /* var() 可以接收第二个参数作为缺省值 */
  font-size:var(--size, 20px);
  outline:1px solid #666;
}

（2）应用规则集 @apply 规则

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

（3）CSS新伪类

（4）颜色函数

rgb()、rgba() 、hsl() 和 hsla() 可以直接使用空格做分割符，并且rgb() 和 hsl() 函数在第三个值和第四个值之间加上 / 可以取替 rgba() 和 hsla() 十六进制描述颜色可以在原本的语法规则中最后两位添加新的位值来描述透明度可以在color() 函数中指定颜色空间

（5）动态计算 calc() 函数

动态计算样式的length

:root {
    --xPosition: 50px;
    --yPosition: 50px;
}
.container {
    background-position: calc(100% - var(--xPosition)  calc(100% - var(--yPosition)))
}

（6）特征查询 @supports规则

查询浏览器是否支持给定的属性在@关键字后面的条件成立时，应用 { } 里的样式规则

.card {
 margin: 10px;
 border: 1px solid #ddd;
}
@supports (box-shadow: 3px 5px 5px #eee) {
 .card {
   box-shadow: 3px 5px 5px #eee
 }
}

支持与（and）或（or）非（not）逻辑运算

@supports (display: grid) and (not (display: inline-grid)) {}
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

（7）媒体查询 @media 规则

基本语法

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）

all
print
screen
speech

一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试常用的为宽和高一组CSS规则，会在测试通过且媒体类型正确的时候应用

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

支持与（and）或（or）非（not）逻辑运算

（8）蒙版与剪切 mask & clip-path

混合模式 mix-blend-mode 和 background-blend-mode

h1 {
    mask-image: url(mask.png);
}

（9）CSS命名规则（建议）

OOCSS - Object-Oriented CSS)

结构与样式分离
容器与内容分离

BEM - Block & Element & Modifier 在选择器中，我们用以下三种符号来表示以上内容

中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

SMACSS

Base：页面的基本样式命名规则
Layout：布局命名规则
Module：模块规命名规则
State：状态命名规则
Theme：主题命名规则
Changing State：可变状态的命名规则

修饰符是--，子模块是__

（10）CSS预处理器

sass less stylus

（11）自定义CSS样式

CSS Houdini PostCSS

（12）未来

随着前端工程的普及，CSS的发展可谓是一日千里，近日也有一些数学属性的提案在发起，以后会发展成什么样，没人可以知道。只是总的来说，CSS的未来是一片光明的 CSS，未来可期！

四、作业及提交方式

1. 提交作业

提交课后作业和笔记可以积累积分，积累积分可以获得奖励课后作业发我的邮箱3305614186@qq.com
发送邮件主题按如下格式前端-姓名-第x周-第x次，如前端-陈思远-第1周-第1次每次课程作业在下下次课程之前发送到我的邮箱

2. 作业内容

（1）作业1 在第一周第三次作业中，我们做了如下一个模块，当时我们并没有要求做样式过渡的效果，现在请在之前作业的基础上利用过渡补充完成过渡效果，做成一个完整的模块

（2）作业2 利用动画和变换制作一个旋转相册参考样式如下，仅供参考可以有自己的样式与想法，不必拘泥于例子的样式

3. 作业参考代码

参考代码已上传Gitee和Github仓库 Gitee链接 GIthub链接作业代码仅供参考，还希望大家能够自己独立完成作业，有问题可以在群里提问或者私戳我，希望大家在前端的学习过程中都能够有所思考，有所收获

Files

前端 · 第3周第1次 · CSS学习-5· 2022_1_19.md

Latest commit

History

前端 · 第3周第1次 · CSS学习-5· 2022_1_19.md

File metadata and controls

一、内容结构

二、文档及视频资源

三、知识点总结

1. 过渡 transition

（1）简介

（2）过渡应用属性 transition-property 属性

（3）过渡持续时间 transition-duration 属性

（4）过渡持续效果 transition-timing-function 属性

（5）过渡延迟时间 transition-delay 属性

（6）过渡简写属性 transition 属性

2. 动画 animation

（1）简介

（2）关键帧 @keyframes规则

（3）动画名称 animation-name 属性

（4）动画持续时间 animation-duration 属性

（5）动画延迟开始时间 animation-delay 属性

（6）动画播放次数 animation-iteration-count 属性

（7）动画播放方向 animation-direction 属性

（9）动画播放速度曲线 animation-timing-function 属性

（10）动画播放时间外效果控制 animation-fill-mode 属性

3. 变换 transform

（1）简介

（2）transform属性

（3）坐标轴

（4）平移 translate

（5）缩放 scale

（6）旋转 rotate

（7）倾斜转换 skew

（8）其他

（9）transform-origin 属性

（10）transform-style 属性

（11）backface-visibility 属性

4. 网格布局 - CSS Grid Layout Module

（1）简介

（2）网格布局设置方法

（3）基本概念

（4）网格容器

（5）网格项目

（6）实例

5. CSS其他特性与CSS未来（介绍）

（1）CSS变量 var()函数

（2）应用规则集 @apply 规则

（3）CSS新伪类

（4）颜色函数

（5）动态计算 calc() 函数

（6）特征查询 @supports规则

（7）媒体查询 @media 规则

（8）蒙版与剪切 mask & clip-path

混合模式 mix-blend-mode 和 background-blend-mode

（9）CSS命名规则（建议）

（10）CSS预处理器

（11）自定义CSS样式

（12）未来

四、作业及提交方式

1. 提交作业

2. 作业内容

3. 作业参考代码

（2）过渡应用属性 `transition-property` 属性

（3）过渡持续时间 `transition-duration` 属性

（4）过渡持续效果 `transition-timing-function` 属性

（5）过渡延迟时间 `transition-delay` 属性

（6）过渡简写属性 `transition` 属性

（2）关键帧 `@keyframes`规则

（3）动画名称 `animation-name` 属性

（4）动画持续时间 `animation-duration` 属性

（5）动画延迟开始时间 `animation-delay` 属性

（6）动画播放次数 `animation-iteration-count` 属性

（7）动画播放方向 `animation-direction` 属性

（9）动画播放速度曲线 `animation-timing-function` 属性

（10）动画播放时间外效果控制 `animation-fill-mode` 属性

（2）`transform`属性

（9）`transform-origin` 属性

（10）`transform-style` 属性

（11）`backface-visibility` 属性