CSS3

CSS3 的现状

  • 新增的 CSS3 特性有兼容性问题，ie9+ 才支持

  • 移动端支持优于 PC 端

  • 不断改进中

  • 应用相对广泛

  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

CSS3 盒子模型

  • CSS3 中可以通过 box-sizing 来指定盒模型，有 2 个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

  • 可以分成两种情况：

    • **box-sizing : content-box; ** : 盒子大小为 width / height + padding + border （以前默认的）
    • box-sizing : border-box; : 盒子大小为 width / height

  • 如果盒子模型我们改为了 box-sizing: border-box ， 那 padding 和 border 就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--增加padding / border 之后元素宽高会变大-->
<style>
  .box1 {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
  }
</style>

<!--增加padding/border之后元素宽不会变大-->
<style>
  .box1 {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
  }
</style>

CSS3 滤镜 filter

  • filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。
  • blur 函数: 模糊处理,数值越大越模糊
1
filter: blur(5px);

image-20220126220324724

CSS3 calc 函数

  • calc() 此 CSS 函数让你在声明 CSS 属性值时执行一些计算。
  • 括号里面可以使用+ - \* /来进行计算。
1
width: calc(100% - 80px);

CSS 3 圆角边框与阴影

边框圆角

  • 01 什么是边框圆角
    • 在 CSS3 中，新增了圆角边框样式，将直角的边框变为圆角的边框,这样我们的盒子就可以变圆角了。
    • border-radius 属性用于设置元素的外边框圆角。
    • 参数值可以为 像素值 或 百分比 的形式
1
border-radius: length;
  • 02 边框的格式
    • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
    • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
1
2
3
4
border-radius: 100px 100px 100px 100px; /*左上 右上 右下 左下*/
border-radius: 100px 50px 100px; /*左上 右上左下 右下*/
border-radius: 100px 50px; /*左上右下 右上左下*/
border-radius: 100px; /*左上 右下 右上 左下*/
1
2
3
4
5
6
7
8
9
.two {
  width: 200px;
  height: 200px;
  border: 50px solid red;
  box-sizing: border-box;
  border-radius: 50px;
}
/* 当边框圆角的值 > 边框宽度的时候，外边框和内边框都会变成圆角
	 当边框圆角的值 <= 外边宽度的时候，外边框是圆角，内边框是直角 */
  • 03 将正方形变为圆形的技巧
    • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
1
border-radius: 50%;
  • 04 系统如何绘制圆角
    • 首先根据指定的值找到圆心
    • 按照指定的值作为半径绘制圆弧
  • 05 绘制半圆
1
2
3
4
5
6
7
8
.one {
  /*绘制半圆*/
  width: 200px;
  height: 100px;
  border: 1px solid red;
  box-sizing: border-box;
  border-radius: 100px 100px 0 0;
}
  • 06 绘制椭圆
1
2
3
4
5
6
7
8
.one {
  /*绘制椭圆*/
  width: 400px;
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box;
  border-radius: 50%;
}
  • 07 兼容性 :
    • 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

圆角边框案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        p{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background:red;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <p>新人福利</p>
</body>

盒子阴影

  • CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
1
box-shadow: h-shadow v-shadow blur spread color inset;

image-20220126142335889

  • 注意:
    • 01 默认的是外阴影 ( outset ), 但是不可以写这个单词,否则造成阴影无效
    • 02 盒子阴影不占用空间，不会影响其他盒子排列。
1
box-shadow: 0 15px 30px #ccc;

文字阴影

  • text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色
  • 不写文字阴影颜色,则颜色默认和文字颜色一样
1
2
3
4
5
6
7
8
9
10
11
<style>
  p {
    font-size: 30px;
    /*水平偏移 垂直偏移 模糊度 阴影颜色*/
    text-shadow: 10px 10px 10px blue;
  }
</style>

<body>
  <p>我是段落</p>
</body>

边框图片

1
border-image-source: ur1('images/border.jpg'); /* 告诉浏览器让哪一张图片成为边框 */
  • 如果只通过 source 指定了哪一张图片作为边框的图片，默认情况下会将图片放到边框的四个顶点
  • 如果设置了边框图片，那么就不会显示边框颜色，边框图片的优先级高于边框颜色
1
border-image-slice: 70 70 70 70; /* 告诉浏览器如何对指定的边框图片进行切割 */
1
border-image-width: 10px; /* 告诉浏览器边框图片显示的宽度，并不是指定边框的宽度 */
  • 注意点:如果通过 border-image-width 指定了边框图片的宽度，那么默认的边框宽度就会失效
1
2
3
4
/* 告诉浏览器除了边框图片四个角以外的图片如何填充，默认是拉伸 */
border-image-repeat: stretch; /*默认*/
border-image-repeat: repeat;
border-image-repeat: round;
1
2
/* 告诉浏览器边框图片需要向外移动多少 */
border-image-outset: 10px 30px 50px 70px;
1
2
/* 边框图片的连写 */
border-image: url('images/border.jpg') 70 fill repeat;

CSS 3 渐变

线性渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  .one {
    width: 300px;
    height: 200px;

    /*默认从上到下渐变*/
    background: linear-gradient(red,green);

    /*从下到上渐变*/
    background: linear-gradient(to top,red,green);

    /*从左到右渐变*/
    background: linear-gradient(to right,red,green);

    /*从右到左渐变*/
    background: linear-gradient(to left, red, green);

    /* 指定度数渐变 */
    background: linear-gradient(70deg, red, green);
  }
</style>
  • 至少需要传递 2 个颜色,至多没有上限
1
background: linear-gradient(to right, red, green, yellow);
  • 默认情况下会自动计算纯色和渐变色的范围，但是我们也可以手动指定
1
background: linear-gradient(to right, red 50px, green);

镜像渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.one {
  width: 300px;
  height: 200px;
  /* 径向渐变:默认从中心点向四周扩散 */
  background: radial-gradient(red, green);

  /* 可以通过 at 关键字的方式修改开始渐变的位置  */
  background: radial-gradient(at 50px 50px, red, green);

  /* 径向渐变也可以指定扩散的范围 */
  background: radial-gradient(50px, red, green);

  /* 如果需要同时指定扩散的位置和扩散的范围，那么范围必须写到 at 前面 */
  background: radial-gradient(100px at 50px 50px, red, green);
}

CSS3 新增选择器

属性选择器

  • 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者 id 选择器。

  • 格式:

    • [attribute]

    • 作用:根据指定的属性名称找到对应的标签, 然后设置属性

    • [attribute=value]

    • 作用: 找到有指定属性, 并且属性的取值等于 value 的标签, 然后设置属性

    • 最常见的应用场景, 就是用于区分 input 属性

image-20220126221554352

  • 注意：类选择器、属性选择器、伪类选择器，权重为 10。
  • 属性的取值是以什么开头的
    • [attribute|=value] CSS2
    • [attribute^=value] CSS3
    • 两者之间的区别:
      • CSS2 中的只能找到 value 开头,并且 value 是被-和其它内容隔开的
      • CSS3 中的只要是以 value 开头的都可以找到, 无论有没有被-隔开
  • 属性的取值是以什么结尾的
    • [attribute$=value] CSS3
    • 属性的取值是否包含某个特定的值得
    • [attribute~=value] CSS2
    • [attribute=value]* CSS3
    • 两者之间的区别:
      • CSS2 中的只能找到独立的单词, 也就是包含 value ,并且 value 是被空格隔开的
      • CSS3 中的只要包含 value 就可以找到, 无论有没有被隔开

结构伪类选择器

  • 结构伪类选择器主要根据文档结构来选择元素，常用于选择父级选择器里面的子元素

image-20220126221624514

  • 注意：类选择器、属性选择器、伪类选择器，权重为 10。

  • nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）

    • n 可以是数字，关键字和公式

      • n 如果是数字，就是选择第 n 个子元素， 数字从 1 开始…

      • n 可以是关键字：even 偶数，odd 奇数

      • n 可以是公式：常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

image-20220126221705022

  • nth-child 和 nth-of-type 的区别：

    • 01 nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第 n 个孩子，然后看看是否和 E 匹配

    • 02 nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子

结构伪类选择器总结

  • 结构伪类选择器一般用于选择父级里面的第几个孩子

  • nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第 n 个孩子，然后看看是否和 E 匹配,匹配就会生效,不匹配就不会生效

  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配 E ，然后再根据 E 找第 n 个孩子

  • 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式

  • 如果是无序列表，我们肯定用 nth-child 更多

  • 类选择器、属性选择器、伪类选择器，权重为 10。

伪元素选择器

  • 伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。
  • ◼ 常用的伪元素有
    •  :first-line、::first-line : 针对首行文本设置属性
    •  :first-letter、::first-letter : 针对首字母设置属性
    •  :before、**::before**
    •  :after、**::after**
  • 为了区分伪元素和伪类，建议伪元素使用 2 个冒号，比如::first-line
  • ::before 和::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
    • 常通过 content 属性来为一个元素添加修饰性的内容。

image-20220126221813980

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div::before {
    content: 'hello ~~';
  }
  div::after {
    content: ' 该学习啦~~';
  }
</style>

<body>
  <div>李银河</div>
</body>

注意：

  • ::before 和 ::after 创建一个元素，但是属于行内元素

  • 新创建的这个元素在 DOM 树中是找不到的，所以我们称为伪元素

  • 语法： element::before { }

  • before 和 after 必须有 content 属性

  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

  • 伪元素选择器和标签选择器一样，权重为 1

伪元素选择器案例

  • 伪元素选择器使用场景一：
    • 伪元素字体图标

1
2
3
4
5
6
7
p::before {
  position: absolute;
  right: 20px;
  top: 10px;
  content: '\e91e';
  font-size: 20px;
}
  • 伪元素选择器使用场景二：
    • 仿土豆效果
1
2
3
4
5
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
  /* 显示元素 */
  display: block;
}
  • 伪元素选择器使用场景三：
    • 伪元素清除浮动
  • 001 额外标签法也称为隔墙法，是 W3C 推荐的做法。
    • 注意： 要求这个新的空标签必须是块级元素。

  • 002 伪元素选择器使用场景 3：伪元素清除浮动

  • 后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

image-20220126215848472

  • 003 伪元素选择器使用场景 3：伪元素清除浮动

  • 后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

image-20220126215824883

CSS 3 过渡模块

过渡效果

    1. 过渡三要素
    • 1.1 必须要有属性发生变化
    • 1.2 必须告诉系统哪个属性需要执行过渡效果
    • 1.3 必须告诉系统过渡效果持续时长
    1. 注意点
    • 当多个属性需要同时执行过渡效果时用逗号隔开即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 50px;
    background-color: red;
    /*1.2 告诉系统哪个属性需要执行过渡效果*/
    transition-property: width, background-color;
    /*1.3 告诉系统过渡效果持续的时长*/
    transition-duration: 3s, 3s;
  }
  div:hover {
    /*1.1 变化的属性 */
    width: 300px;
    background-color: blue;
  }
</style>

<body>
  <div></div>
</body>

过渡效果的其他属性

  • 告诉系统延迟多少秒之后才开始过渡动画

    • transition-delay: 1s;

  • 告诉系统过渡效果的运动的速度

    • linear:匀速 ease:逐渐减速 ease-in:加速 ease-out:减速 ease-in-out:先加速后减速
    • transition-timing-function: ease-in-out;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 50px;
    background-color: red;
    /*1.2 告诉系统哪个属性需要执行过渡效果*/
    transition-property: width;
    /*1.3 告诉系统过渡效果持续的时长*/
    transition-duration: 3s;
    /*1.4 告诉系统延迟多少秒之后才开始过渡动画*/
    transition-delay: 1s;
    /*1.5 告诉系统过渡动画的运动的速度*/
    /*1.5 linear:匀速  ease:逐渐减速 ease-in:加速 ease-out:减速 ease-in-out:先加速后减速*/
    transition-timing-function: ease-in-out;
  }
  div:hover {
    /*1.1 变化的属性*/
    width: 300px;
  }
</style>

<body>
  <div></div>
</body>

过渡效果的简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 50px;
    background-color: red;
    /*1.2 格式: 过渡属性 过渡时长 运动速度 延迟时间 */
    /*1.3 和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开即可*/
    /*1.4 连写时可以省略后面的两个参数，因为只要编写了前面的两个参数就已经满足了过渡的三要素*/
    /* transition: width 2s linear 0.5s,background-color 2s linear 0.5s; */

    /*1.5 如果多个属性运动的速度/延迟的时间/持续时间都一样,那么可以简写为:*/
    transition: all 2s;
  }
  div:hover {
    /*1.1 变化的属性*/
    width: 300px;
    background-color: blue;
  }
</style>

<body>
  <div></div>
</body>

过渡案例_弹性效果

    1. 编写过渡套路
    • 1.1 不要管过渡，先编写基本界面
    • 1.2 修改我们认为需要修改的属性
    • 1.3 再回过头去给被修改属性的那个元素添加过渡即可

1654660945666

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  div {
    height: 100px;
    text-align: center;
    background-color: red;
    margin-top: 100px;
  }
  div span {
    line-height: 100px;
    color: #fff;
    font-size: 80px;
    transition: all 0.5s;
  }
  div:hover span {
    margin: 0 20px;
  }
</style>

<body>
  <div>
    <span>江</span>
    <span>哥</span>
    <span>带</span>
    <span>你</span>
    <span>狂</span>
    <span>虐</span>
    <span>H</span>
    <span>5</span>
  </div>
</body>

过渡案例_手风琴效果

1654660858458

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul {
    width: 960px;
    height: 300px;
    background-color: #ccc;
    margin: 100px auto;
    overflow: hidden;
  }

  li {
    float: left;
    width: 160px;
    height: 300px;
    list-style: none;
    box-sizing: border-box;
    transition: width 0.5s;
  }

  /* 固定图片大小 */
  ul li img {
    width: 460px;
    height: 300px;
  }

  /* 鼠标移入 ul 时, li 的 width 设置为 100px */
  ul:hover li {
    width: 100px;
  }

  /* 鼠标移入 li 时, li 的 width 设置为 460px */
  ul li:hover {
    width: 460px;
  }
</style>

<body>
  <ul>
    <li><img src="./images/001.jpg" alt="" /></li>
    <li><img src="./images/002.jpg" alt="" /></li>
    <li><img src="./images/003.jpg" alt="" /></li>
    <li><img src="./images/004.jpg" alt="" /></li>
    <li><img src="./images/005.jpg" alt="" /></li>
    <li><img src="./images/006.jpg" alt="" /></li>
  </ul>
</body>

2D 转换

  • 转换（transform）是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

  • 转换（transform）可以简单理解为变形移动：translate

  • 旋转：rotate

  • 缩放：scale

  • 2D 转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

image-20220126222143582

2D 转换之移动

  • 2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

  • 01 语法:

1
2
3
4
transform: translate(x, y);
/*或者分开写*/
transform: translateX(n);
transform: translateY(n);
1
2
3
4
5
6
div {
  width: 100px;
  height: 100px;
  /* x 就是 x 轴上移动位置 , y 就是 y 轴上移动位置 , 中间用逗号分隔 */
  transform: translate(100px, 100px);
}

  • 02 重点:

    • 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
    • translate 最大的优点：保留原来的占位,不会影响到其他元素的位置
    • translate 中的百分比单位是相对于自身元素的宽高 translate:(50%,50%);
    • 对行内标签没有效果

  • 03 让盒子实现水平和垂直居中

1
2
3
4
5
6
7
8
9
div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%, -50%);
}

2D 转换之旋转

  • 2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

image-20220126222519050

  • 01 语法:
1
2
3
4
5
6
div {
  width: 200px;
  height: 100px;
  background: orange;
  transform: rotate(45deg);
}
  • 02 重点:
    • rotate 里面跟度数，单位是 deg 比如 rotate(45deg)
  • 角度为正时，顺时针，负时，为逆时针
    • 默认旋转的中心点是元素的中心点
  • 03 旋转轴向:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px auto;
    border-top: 3px solid blue;
    /*默认绕Z轴旋转*/
    /* transform: rotate(45deg); */
    /*绕X轴旋转*/
    /* transform: rotateX(45deg); */
    /*绕Y轴旋转*/
    /* transform: rotateY(45deg); */
    /*绕Z轴旋转*/
    transform: rotateZ(45deg);
  }
</style>

<body>
  <div></div>
</body>

2D 转换案例

image-20220126222951405

1
2
3
4
5
6
7
8
9
10
11
12
/* 旋转箭头 */
p::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}

2D 转换中心点

  • 我们可以设置元素转换的中心点
1
transform-origin: x y; /* 设置旋转中心点*/

  • 注意后面的参数 x 和 y 用空格隔开

  • x y 默认转换的中心点是元素的中心点(50% 50%)

  • 还可以给 x y 设置像素或者方位名词（top bottom left right center）

2D 转换案例

1
2
/* 设置旋转中心点*/
transform-origin: x y;

2D 转换之缩放 scale

  • 缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
1
transform: scale(x, y);

  • 注意其中的 x 和 y 用逗号分隔

  • transform:scale(1,1); ：宽和高都放大一倍，相当于没有放大

  • transform:scale(2,2); ：宽和高都放大了 2 倍

  • transform:scale(2); ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

  • transform:scale(0.5,0.5); ：宽高都缩小 0.5 倍

  • sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D 缩放案例

  • 分页按钮:

2D 转换综合写法

  • 01 同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，
  • 02 区分先后循序, 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  • 03 当我们同时有位移和其他属性的时候，记得要将位移放到最前

2D 转换总结

  • 转换 transform 我们简单理解就是变形有 2D 和 3D 之分

  • 我们暂且学了三个分别是 位移 旋转 和 缩放

  • 2D 移动 translate(x, y) 最大的优势是不影响其他盒子，里面参数用百分比%，是相对于自身宽度和高度来计算的

  • 可以分开写比如 translateX(x) 和 translateY(y)

  • 2D 旋转 rotate(度数) 可以实现旋转元素度数的单位是 deg

  • 2D 缩放 sacle(x,y) 里面参数是数字不跟单位, 可以是小数, 最大的优势不影响其他盒子

  • 设置转换中心点 transform-origin : x y; 参数可以百分比、像素 或者是 方位名词

  • 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

2D 透视属性

  • 在 2D 平面产生近大远小视觉立体，但是只是效果二维的

    • 如果想要在网页产生 3D 效果需要透视（理解成 3D 物体投影在 2D 平面内）。

    • 模拟人类的视觉位置，可认为安排一只眼睛去看

    • 透视我们也称为视距：视距就是人的眼睛到屏幕的距离

    • 距离视觉点越近的在电脑平面成像越大，越远成像越小

    • 透视的单位是像素

  • 透视写在被观察元素的父盒子上面的

  • d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

    • z：就是 z 轴，物体距离屏幕的距离，z 轴越大（正值）我们看到的物体就越大。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    /*透视 近大远小 值越小,看到的越大 */
    /*透视属性必须添加到需要呈现近大远小效果的元素的父元素上面*/
    perspective: 500px;
  }

  div {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px auto;
    border-top: 3px solid blue;
    /*绕X轴旋转*/
    transform: rotateX(45deg);
  }
</style>

<body>
  <div></div>
</body>

2D 透视案例_照片后倒

1659518845563

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 300px;
    margin: 100px auto;
    border: 1px solid red;
    font-size: 0px;
    perspective: 200px;
  }

  div img {
    width: 100%;
    transform-origin: center bottom; /* 设置旋转的中心线为 x 轴 */
    transition: transform 1s; /* 过渡 */
  }

  div:hover img {
    transform: rotateX(45deg); /* 绕 x 轴旋转 */
  }
</style>

<body>
  <div>
    <img src="./images/001.jpg" alt="" />
  </div>
</body>

2D 转换案例_照片墙

1654690831171

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    height: 400px;
    background-color: skyblue;
    text-align: center;
    margin-top: 50px;
  }

  li {
    display: inline-block;
    list-style: none;
    width: 150px;
    height: 84px;
    margin-top: 100px;
    background-color: red;
    position: relative;
    transition: all 0.4s;
  }

  li:nth-child(1) {
    transform: rotate(20deg);
  }

  li:nth-child(2) {
    transform: rotate(-20deg);
  }

  li:nth-child(3) {
    transform: rotate(30deg);
  }

  li:nth-child(4) {
    transform: rotate(-25deg);
  }

  li:hover {
    transform: scale(1.5);
    z-index: 10;
  }

  img {
    width: 150px;
    height: 84px;
  }
</style>

<body>
  <div>
    <ul>
      <li><img src="./images/001.jpg" alt="" /></li>
      <li><img src="./images/002.jpg" alt="" /></li>
      <li><img src="./images/003.jpg" alt="" /></li>
      <li><img src="./images/004.jpg" alt="" /></li>
    </ul>
  </div>
</body>

CSS3 动画

  • 动画（animation）是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

  • 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

定义动画

  • 用 keyframes 定义动画（类似定义类选择器）
1
2
3
4
5
6
7
8
9
/* 定义动画 */
@keyframes move {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

动画序列:

  • 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

  • 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

  • 请用百分比来规定变化发生的时间，或用关键词 from 和 to，等同于 0% 和 100% 。

使用动画

1
2
3
4
5
6
7
8
9
10
div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 调用动画*/
  animation-name: move;
  /* 动画持续时间*/
  animation-duration: 5s;
}

动画常用属性

image-20220126224512656

动画简写属性

  • animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
1
2
/* 			动画名称  持续时间  匀速  延迟时间  无限播放  反向*/
animation: myfirst 5s linear 2s infinite alternate;

  • 简写属性里面不包含 animation-play-state

  • 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用

  • 想要动画走回来，而不是直接跳回来：animation-direction ：alternate

  • 盒子动画结束后，停在结束位置：animation-fill-mode ：forwards

速度曲线细节

  • animation-timing-function：规定动画的速度曲线，默认是“ease”

image-20220126224843627

动画案例-奔跑的熊大

1
...

动画案例_无缝滚动轮播图

1
...

3D 转换

  • 3D 转换特点:

    • 近大远小。
    • 物体后面遮挡不可见

  • 当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。

三维坐标系

  • 三维坐标系其实就是指立体空间，立体空间是由 3 个轴共同组成的。

    • x 轴：水平向右, 注意：x 右边是正值，左边是负值

    • y 轴：垂直向下, 注意：y 下面是正值，上面是负值

    • z 轴：垂直屏幕, 注意：往外面是正值，往里面是负值

  • 3D 转换我们主要学习工作中最常用的 3D 位移和 3D 旋转.

  • 3D 位移: translate3d(x,y,z)

  • 3D 旋转: rotate3d(x,y,z)

  • 透视: perspective

  • 3D 呈现 transfrom-style

3D 移动 translate3d

  • 3D 移动在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向。
  • **translform:translateX(100px)**：仅仅是在 x 轴上移动
    • **translform:translateY(100px)**：仅仅是在 Y 轴上移动
    • **translform:translateZ(100px)**：仅仅是在 Z 轴上移动（注意：translateZ 一般用 px 单位）
    • **transform:translate3d(x,y,z)**：其中 x、y、z 分别指要移动的轴的方向的距离
  • 因为 z 轴是垂直屏幕，由里指向外面，所以默认是看不到元素在 z 轴的方向上移动

translateZ

  • **translform:translateZ(100px)**：仅仅是在 Z 轴上移动。

  • 有了透视，就能看到 translateZ 引起的变化了

    • translateZ：近大远小
    • **translateZ(10px)**：往外是正值
    • **translateZ(-10px)**：往里是负值

3D 旋转 rotate3d

  • 3D 旋转指可以让元素在三维平面内沿着 x 轴，y 轴，z 轴或者自定义轴进行旋转。

  • 语法:

    • **transform:rotateX(45deg)**：沿着 x 轴正方向旋转 45 度
    • transform:rotateY(45deg) ：沿着 y 轴正方向旋转 45deg
    • transform:rotateZ(45deg) ：沿着 Z 轴正方向旋转 45deg

image-20220126233403938

  • 对于元素旋转的方向的判断我们需要先学习一个左手准则。

  • 左手准则:

    • 左手的手拇指指向 x 轴的正方向
    • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

  • 左手准则:

    • 左手的手拇指指向 y 轴的正方向
    • 其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向（正值）

  • **transform:rotate3d(x,y,z,deg)**：沿着自定义轴旋转 deg 为角度（了解即可）

    • xyz 是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

  • transform:rotate3d(1,0,0,45deg) 就是沿着 x 轴旋转 45deg

  • transform:rotate3d(1,1,0,45deg) 就是沿着对角线( x 轴与 y 轴形成的矢量)旋转 45deg

3D 呈现 transfrom-style

  • 控制子元素是否开启三维立体环境。

  • transform-style: flat; 子元素不开启 3d 立体空间, 默认的

  • transform-style: preserve-3d; 子元素开启立体空间

  • 代码写给父级，但是影响的是子盒子

  • 这个属性很重要，后面必用

image-20220126234140466

案例：两面翻转的盒子

1
2
3
4
<div class="box">
  <div class="front">黑马程序员</div>
  <div class="back">pink老师等你</div>
</div>

  • box 父盒子里面包含前后两个子盒子

  • box 是翻转的盒子 front 是前面盒子 back 是后面盒子

    • box 指定大小，切记要添加 3d 呈现
    • back 盒子要沿着 Y 轴翻转 180 度
    • 最后鼠标经过 box 沿着 Y 旋转 180deg

案例:3D 导航栏

1
...

案例:旋转木马

1
...

案例_3D 旋转音乐播放器

1

浏览器私有前缀

  • 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。后期会用 webpack 处理的.

  • 私有前缀:

    • -moz-：代表 firefox 浏览器私有属性

    • -ms-：代表 ie 浏览器私有属性

    • -webkit-：代表 safari、chrome 私有属性

    • -o-：代表 Opera 私有属性

1
2
3
4
5
/*提倡的写法*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;