❣️ 转换

1.什么是转换

2.转换的属性

3.2D转换

(1) 位移

(2) 缩放

(3) 旋转

(4) 倾斜

4.3D旋转

❣️ 过度

1. 指定参与过渡的css属性

2.设置过渡的出持续时长

3.设置过渡的时间曲线函数（设置过渡的速度）

4.过渡的延迟

5.过渡代码的编写位置

6.过渡的简写方式

❣️ 动画

1.关键帧

2.使用

(1) 创建动画

(2) 调用动画

3.动画的专有属性

(1) 动画的播放次数

(2) 动画的播放顺序

(3) 动画的简写方式

(4) 动画的填充状态

4.animate.css的使用

❣️ CSS优化

❣️ css reset

🆙【前文回顾】👉 定位—相对定位，绝对定位，固定定位_06

❣️ 转换

1.什么是转换

改变元素在页面中的位置，大小，角度，形状

2D转换，只在x和y轴上进行转换

3D转换，添加了z轴

2.转换的属性

语法：transform: none|transform-functions; 默认值none 定义不进行转换。

transform:转换函数1 转换函数2 转换函数3......;

2D，学习4个转换函数，3个要背

3D，学习1个转换函数

3.2D转换

(1) 位移

改变元素在页面中的位置 —— x、y不区分大小写

transform: translate(v1); 在x轴上向右水平位移。(y轴省略的话，默认是0，这跟scale(v1)不一样)

translateX(v1); 在x轴上向右水平位移，即定义转换，只是用 X 轴的值。

translateY(v1); 在y轴上向下垂直位移，即定义转换，只是用 Y 轴的值。

translate(v1,v2); 分别设置x和y轴的位移，即定义 2D 转换。

① translateX(v1)

向X轴平移，v1为正数，往右平移，v1为负数，往左平移

② translateY(v1)

向Y轴平移，v1为正数，往下平移，v1为负数，往上平移

扩展：translate() 和 translate3d()

① translate是同时设置translateX和translateY，所以里面可以填两个参数，第一个值X 第二个 Y

② translate3d是同时设置translateX，translateY和translateZ ，所以里面可以填三个参数

只不过有点不同的是， translate 如果第二个参数不填的话，默认是0，不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。

3d位移示例——translate3d(v1,v2,v3)，例如translate3d(100px,100px,0)

🔹 更多详情，请参考：CSS3转换属性—transform之translate、rotate、scale函数详解

(2) 缩放

改变图片在页面中的尺寸

transform: scale(v1); 同时设置x轴和y轴的缩放倍数

注意：改变的不是元素的宽高，而是 X 和 Y 轴的刻度

v1>=1 放大

0<v1<1 缩小

-1<v1<0 缩小并翻转

v1<-1 放大并翻转

scaleX(v1) 单独设置x轴缩放，即通过设置 X 轴的值来定义缩放转换。

scaleY(v1) 单独设置y轴缩放，即通过设置 Y 轴的值来定义缩放转换。

scale(x,y) 分别设置x和y轴的缩放，即定义 2D 缩放转换。

注意：缩放该元素，>1 放大，<1 缩小，默认值是 1；

示例：transform：scale(1.5);

表示元素放大1.5倍，如果要缩小0.5倍就将设为0.5即可，默认数值等于1。也可以单独设置x轴的缩放和y轴的缩放，也可以将数值设置为负数。

scale数值为负数实现翻转：scaleX(-1) 水平方向上的翻转；scaleY(-1) 纵轴方向上的翻转

(3) 旋转

设置元素在页面上的角度

transform: rotate(45deg); +顺时针，-逆时针定义 2D 旋转

旋转的问题

① 通过设置转换原点，来设置旋转的圆心，圆心不同，旋转效果不同

transform-origin: x y; 取值：1.px为单位的数字（默认值0 0）——元素左上角

2.% （默认值50% 50%）——元素的中心点旋转

3.关键字 x:left/center/right y:top/center/bottom

② 旋转会带着坐标轴一起旋转，会影响旋转之后的位移方向

注意：先位移后旋转和先旋转后位移的效果是有区别的。
transform: translate(300px) rotate(45deg) 与 transform: rotate((45deg) translate(300p)

扩展：关于transform-origin

👉 transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
语法：transform-origin: x-axis y-axis z-axis; 默认值：50% 50% 0

👉 关于rotate，旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center) 。加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点

👉 2D 和 3D旋转

rotate(angle)定义2D旋转 ——原点为基点

rotateX(angle) 定义沿着 X 轴的 3D 旋转——X轴为基点

rotateY(angle) 定义沿着 X 轴的 3D 旋转——Y轴为基点

rotateZ(angle) 定义沿着 Z轴的 3D 旋转——Z轴为基点

transform: rotate3d(x,y,z,angle)定义3d旋转 ——（x,y,z）为基点 +旋转角度

注：x、y可以写成大写的，也可以写成小写的x、y，没有影响

(4) 倾斜

skewX(ndeg)和skewY(ndeg)

skewX(ndeg) 定义沿着 X 轴的 2D 倾斜转换。

skewY(ndeg) 定义沿着 Y 轴的 2D 倾斜转换。

skew(x,y) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

🔹 示例：01_transform.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1,#d2{width: 200px;height: 200px;font:24px jokerman;position: absolute;top:50px;left: 50px;}#d1{background-color: #0ff;/* transform:translate(300px) rotate(45deg); */}#d2{background-color: rgba(255,255,0,0.5);/* 位移 *//* transform: translatey(150px); *//* 缩放 *//* transform: scale(1.5,0.5); *//* 旋转 *//* transform:rotate(45deg); *//* 设置转换原点 *//* transform-origin: 200px 0px; *//* 倾斜 */transform: skew(45deg,45deg);}</style></head><body><div id="d1">参考元素</div><div id="d2">转换元素</div></body>
</html>

运行结果：

🔹 示例：ex.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1{width: 100px;height: 100px;background: url(253.jpg) no-repeat center;background-size: 100%;border-radius: 50%;transition: 5s;margin: 800px auto;}#d1:hover{transform:rotate(360deg) translate(200px) skew(135deg,135deg);box-shadow: 0px 0px 5px 3px #ff0;}</style></head><body><!-- 翻滚吧，猫咪 --><div id="d1"></div></body>
</html>

运行结果：

4.3D旋转

页面中的3D都是模拟的

透视距离，会影响人看这个3D转换的效果不同

设置透视距离，一定要写在3D转换元素的父元素上

perspective: 200px; ——给3D 转换元素定义透视视图。

transform:① 定义沿着 X 轴的 3D 旋转。

rotateX(xdeg); 元素围绕x轴进行旋转就像：单杠，烤羊腿

② 定义沿着 Y 轴的 3D 旋转。

rotateY(ydeg); 元素围绕y轴进行旋转就像：土耳其烤肉，旋转门

③ 定义沿着 Z 轴的 3D 旋转。

rotateZ(zdeg); 元素围绕Z轴进行旋转就像：风车，电风扇，摩天轮

④ 定义 3D 旋转。

rotate3d(x,y,z,ndeg); x,y,z>0 参与旋转，等于0不参与，具体取值是旋转的倍数

💦 扩展：3D的位移和缩放转换

1. translate3d(x,y,z) ——定义 3D位移转换。
① translateX(x)    定义转换，只是用 X 轴的值。
② translateY(y)    定义转换，只是用 Y 轴的值。
③ translateZ(z)    定义 3D 转换，只是用 Z 轴的值。

2. scale3d(x,y,z) ——定义 3D 缩放转换。
① scaleX(x) 通过设置 X 轴的值来定义缩放转换。
② scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
③ scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

🔹 更多详情，请参考：CSS3转换属性—transform之translate、rotate、scale函数详解

🔹 示例：02_3d.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#parent{width: 400px;height: 400px;border: 2px solid #f00;margin: 100px auto;/* 透视距离 */perspective: 200px;}#d1{width: 200px;height: 200px;background-color: #0ff;margin: 100px auto;/* 3d旋转 */transform: rotate3d(1,10,5,45deg);}</style></head><body><div id="parent"><div id="d1">3D转换</div></div></body>
</html>

运行结果：

❣️ 过渡

定义：css值在两个状态间，在一段时间内平缓的变化过程

1. 指定参与过渡的css属性

transition-property:css属性1 css属性2 css属性3...... ——各属性之间可以空格，也可以加逗号

all; 支持过渡的属性，都参与过渡

语法：transition-property: none|all| property;

① none：没有属性会获得过渡效果。

② all：所有属性都将获得过渡效果。

③ property：定义应用过渡效果的 CSS 属性名称列表，列表以空格或逗号分隔。

哪些属性是支持过渡

(1) 颜色属性

例如：background-color ——transition-property: background-color

(2) 阴影

例如：box-shadow、text-shadow ——transition-property:text-shadow

(3) 转换

例如：trasform ——transition-property: trasform

(4) 大多数取值为具体数字的属性

2.设置过渡的出持续时长

transition-duration: s/ms;

规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

3.设置过渡的时间曲线函数（设置过渡的速度）

transition-timing-function: （贝塞尔曲线）

(1) ease 默认值，慢速开始，先加速，在减速，慢速结束

(2) linear 匀速运动

(3) ease-in 慢慢开始，一直提速

(4) ease-out 急速开始，一直减速

(5) ease-in-out 慢速开始，疯狂加速，疯狂减速，慢速结束

4.过渡的延迟

transition-delay:2s;

5.过渡代码的编写位置

过渡代码写在原来的样式中，过渡效果，有去有回；写在伪类中，过渡效果，有去无回

6.过渡的简写方式

transition:property duration timing -function delay ;

最简方式：transition: duration; 相当于 transition:all duration ease 0s

💥 记住过渡的使用口诀：谁做过渡给谁加 💥

🔽 小结

① transition-property 指定CSS属性的name，transition效果

② transition-duration transition效果需要指定多少秒或毫秒才能完成

③ transition-timing-function 指定transition效果的转速曲线

④ transition-delay 定义transition效果开始的时间

🔹 示例：03_transition.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1{width: 100px;height: 100px;background-color: #00F;/* 指定参与过渡的css属性 *//* transition-property: all; *//* 设置过渡的出持续时长 *//* transition-duration: 3s; *//* 设置过渡的时间曲线函数 *//* transition-timing-function: ease; *//* 过渡的延迟 *//* transition-delay: 0s; *//* 过渡的简写方式 */transition:3s;}#d1:hover{background-color: #f00;border-radius: 50%;transform: translate(800px);}</style></head><body><div id="d1"></div></body>
</html>

运行结果：

🔹 示例： 如果没有过渡效果，鼠标经过盒子时盒子会立马变宽，就会显得很突兀，此时就可以用过渡属性来设置的更好看些

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS3过渡效果</title><style>div {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费的时间 运动曲线 何时开始 *//* transition: width .5s; *//* 如果想要写多个属性，利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 当然你也可以直接使用all，设置所有支持过渡的属性，在hover里参与过渡 */transition: all 2s;}/* 添加过渡属性后，鼠标再次经过盒子，盒子就会慢慢变宽、变高、背景色变为aquamarine */div:hover {width: 400px;height: 200px;background-color: aquamarine;}</style></head><body><div id="d1"></div></body>
</html>

运行结果：

🔹 示例：使用过渡，实现鼠标经过时进度条会被慢慢拉满

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS3过渡小练习-进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 7px;/* 谁做过渡给谁加 */transition: all 0.7s;}.bar:hover .bar_in {width: 100%;}</style></head><body><div class="bar"><div class="bar_in"></div></div></body>
</html>

运行结果：

❣️ 动画

过渡	动画
两个css之间的变化	两个，两个以上css的变化
伪类激活过渡	F5(刷新网页)和伪类激活动画

1.关键帧

关键帧，某一个时间点执行的样式

来控制动画的每一个状态

2.使用

(1) 创建动画

① 定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

② 语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

值

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

css-styles

必需。一个或多个合法的 CSS 样式属性。

@keyframes 动画名称 {

0% | from{样式....} // 0%或者from 0%等同于from

.....

100% | to{样式....}

}

🔹 示例1：animation

<!DOCTYPE html>
<html><head><style>div {width: 100px;height: 100px;background: red;/* 实现水平和垂直方向居中 */margin:auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;/* div内部文本水平居中 */text-align: center;/* div内部文本垂直居中 */line-height: 100px;font-weight:bold;animation: testanimations 5s infinite;}@keyframes testanimations {from {transform: translate(0px, 0px);}20% {transform: translate(20px,20px);}40% {transform: translate(40px, 0px);}60% {transform: translate(60px, 20px);}80% {transform: translate(80px, 0px);}to {transform: translate(100, 20);}}</style></head><body><div>我是一个div</div></body>
</html>

运行结果：

注意：20%代表的是动画持续时间的百分比，比如动画时长为10s，则20%是经过2s时的时间点

🔹 示例2：animation

<!DOCTYPE html>
<html><head><style>div {width: 100px;height: 100px;background: red;position: relative;animation: mymove 5s infinite;/* Firefox */-moz-animation: mymove 5s infinite;/* Safari and Chrome */-webkit-animation: mymove 5s infinite;/* Opera */-o-animation: mymove 5s infinite;}@keyframes mymove {from {top: 0px;}to {top: 200px;}}/* Firefox */@-moz-keyframes mymove {from {top: 0px;}to {top: 200px;}}/* Safari and Chrome */@-webkit-keyframes mymove {from {top: 0px;}to {top: 200px;}}/* Opera */@-o-keyframes mymove {from {top: 0px;}to {top: 200px;}}</style></head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div></body>
</html>

运行结果：

🔹 示例3：animation

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.section {display: flex;justify-content: center;align-items: center;position: relative;min-height: 100vh;background: linear-gradient(135deg, #111, #222, #111);}div {width: 70px;height: 70px;position: absolute;background: #fff;border-radius: 50%;box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;animation: animate 2s linear infinite;}@keyframes animate {0% {opacity: 0;}10% {opacity: 1;}90% {opacity: 1;}100% {opacity: 0;}}</style></head><body><section class="section"><div></div></section></body>
</html>

运行结果：

(2) 调用动画

/* 指定调用的动画名称 */

animation-name: change;

/* 设置持续时间 */

animation-duration: 5s;

/* 设置时间曲线函数 */

animation-timing-function: ease;

/* 设置延迟 */

animation-delay: 0s;

3.动画的专有属性

(1) 动画的播放次数

animation-iteration-count:

① 具体的数字

② infinite;

(2) 动画的播放顺序

animation-direction:

normal; 0%~~100%

reverse; 100%~0%

(3) 动画的简写方式

animation:name duration timing-function delay count direction;

最简方式——animation:name duration

(4) 动画的填充状态

animation-fill-mode:

backwards 在动画延迟时间内，填充动画的第一帧

forwards 在动画播放结束之后，填充动画的最后一帧

both 前后都填充

🔹 示例：04_animation.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 定义动画 */@keyframes change{from{background: #f00;border-radius: 0%;transform: rotate(0deg);}25%{background: #ff0;border-radius: 50%;transform: rotate(1800deg);}50%{background: #f0f;border-radius: 0%;transform: rotate(0deg);}75%{background: #0ff;border-radius: 50%;transform: rotate(1800deg);}to{background: #00f;border-radius: 0%;transform: rotate(0deg);}}/* 定义动画 */@keyframes  eyes{0%{background-image: url(22.jpg);transform: rotate(360deg);}25%{background-image: url(11.jpg);transform: rotate(0deg);}50%{background-image: url(22.jpg);transform: rotate(360deg);}75%{background-image: url(11.jpg);transform: rotate(0deg);}100%{background-image: url(22.jpg);transform: rotate(360deg);}}/* 定义动画 */@keyframes  eyess{0%{background-image: url(22.jpg);transform: rotate(360deg);}25%{background:#0000FF;transform: rotate(0deg);}50%{background-size: 100%;background-image: url(mao.jpg);transform: rotate(360deg);}75%{background:#0000FF;transform: rotate(0deg);}100%{background-image: url(11.jpg);transform: rotate(360deg);}}#d1{width: 100px;height: 100px;background-size: 100%;border-radius: 50%;background-repeat: no-repeat;/* 指定调用的动画名称 *//* animation-name: eyes; *//* 设置持续时间 *//* animation-duration: 5s; *//* 设置时间曲线函数 *//* animation-timing-function: ease; *//* 设置延迟 *//* animation-delay: 0s; *//* 设置动画的执行次数 *//* animation-iteration-count: infinite; *//* 设置动画的播放顺序 *//* animation-direction: reverse; *//* 动画的简写方式 */animation: eyess 3s 2s; /* 执行哪个动画，就写哪个动画名称 *//* 设置动画的填充状态 */animation-fill-mode: both;}</style></head><body><div id="d1"></div></body>
</html>

运行结果：

素材：22.jpg、11.jpg、mao.jpg

4.animate.css的使用

animate.css是全世界程序员共用的动画库

https://animate.style/

只要把css文件导入，就可以直接使用动画名称了

🔹 示例：05_animate.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/><style>#d1{width: 130px;height: 40px;background-color: #afa;margin: 50px;animation: rubberBand 1s;}#d2,#d3,#d4{width: 20px;height: 20px;border: 2px solid #f00;background-image: url(Sprites.jpg);background-size: 2000%;}#d2{background-position: 2px -38px;	}#d3{background-position: -59px -38px;}#d4{background-position: -59px -79px;}</style></head><body><div id="d2"></div><div id="d3"></div><div id="d4"></div><br><hr><br><div id="d1"></div></body>
</html>

运行结果：

素材：Sprites.jpg

🔹 示例：css动画时钟

<!Doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#clock{width:400px;height:400px;border:6px solid blue;border-radius:50%;position:relative;}#minute{width:10px;height:100px;background:purple;position:absolute;top:100px;left:195px;transform-origin:center bottom;animation:turn 3600s linear infinite;}#second{width:6px;height:150px;background:blue;position:absolute;top:50px;left:197px;transform-origin:center bottom;animation:turn 60s linear infinite;}/*声明动画*/@keyframes turn{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style></head><body><div id="clock"><div id="minute"></div><div id="second"></div></div></body>
</html>

运行结果：

❣️ CSS优化

1.优化的目的

(1) 减少服务器的压力

(2) 提升用户体验

2.CSS优化的原则

(1) 尽量减少请求的个数------缓存（精灵图的使用，雪碧图）

(2) 在页面的顶部引入css文件

(3) 将css和js写在独立的文件中

3.CSS代码的优化

(1) 尽量合并样式（能群组就群组，能简写就简写）

(2) 避免出现空的href和src

(3) 代码压缩，压缩之后代码在名称中会添加min

❣️ css reset

HTML的标签在不同浏览器中，有不同的默认样式

一般情况下，我们在开发之前，会把这些不同的默认样式，进行统一

① 都清除

② 给统一值

1.css reset

样式重置，没有规则，只要适合你的项目，怎么写怎么对

css reset很霸道，把html语义中的样式，都清除了。这种霸道的统一，有人追捧，有人抵触

2.normalize.css

normalize.css是一种温和的解决浏览器兼容性和bug的css文件。

是一个非常小的css文件，保留了默认语义样式，只为不同浏览器的兼容性，和bug做了修改，非常温和

🔹 示例：06_cssreset

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="normalize.css"/></head><body><div>我是一个div</div><p>我是一个p</p><ul><li>123</li><li>123</li><li>123</li><li>123</li></ul></body>
</html>