一
1.1平面转换 transform 作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜） 平面转换又叫 2D 转换
1.2平面转换 - 平移
-
属性
transform: translate(X轴移动距离，Y轴移动距离）;
● 取值 ◆ 像素单位数值 ◆ 百分比（参照盒子自身尺寸计算结果） ◆ 正负均可 ● 技巧 ◆ translate(）只写一个值，表示沿着X 轴移动 ◆ 单独设置X或Y轴移动距离：translateX(）或 translateY()
.son { width: 200px; height: 100px; background-color: ■pink; transition: all 0.5s; } /＊鼠标移入到父盒子，son改变位置＊/ .father:hover .son { transform: translate(200px, 100px); /* 百分比：参照盒子自身尺寸计算结果 */ transform: translate(50%, 100%); transform: translate(-50%, 100%); /* 只写一个数表示水平方向 */ transform: translate(100px); transform: translateY(100px); transform: translatex(100px); }.box{ position: absolute; left: 50%; top: 50%; /* 向左向上移动自身尺寸的一半＊/ transform: translate(-50%, -50%); width: 200px; height: 100px; background-color: pink; } 可使盒子的中心在页面中心
1.3平面转换﹣旋转
-
属性
transform: rotate（旋转角度）; ◆ 角度单位是 deg ● 技巧 ◆ 取值正负均可 ◆ 取值为正，顺时针旋转 ◆ 取值为负，逆时针旋转
img {
width: 200px;
transition: all 2s;
}
/* 鼠标悬停到图片上面，添加旋转效果 */
img:hover{
/* 正数：顺时针旋转；负数：逆时针旋转＊/
transform: rotate(360deg);
transform: rotate(-360deg);
}
1.4平面转换 ﹣改变转换原点 ● 默认情况下，转换原点是盒子中心点
● 属性 transform-origin: 水平原点位置 垂直原点位置； ● 取值 ● 方位名词（left、top、right、bottom、center)
● 像素单位数值 ● 百分比
img {
width: 200px;
border: 1px solid □#000;
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: rotate(360deg);
}
1.5平面转换 ﹣多重转换 多重转换技巧：先平移再旋转 transform: translate() rotate();
.box {
width: 800px;
height: 200px;
border: 1px solid O#000;
}
img {
width: 200px;
transition: all 5s;
}
/＊鼠标移入box，图片边走边转 */
.box:hover img {
/* 先平移再旋转 */
transform: translate(600px) rotate(360deg);
/* 旋转会改变坐标轴向 */
/＊多重转换：以第一种转换形态的坐标轴为准 */
transform: rotate(360deg) translate(600px);
/* 层叠性，不可以分着写 */
transform: translate(600px);
transform: rotate(360deg);
}
1.6平面转换﹣缩放 思考：改变元素的width或height属性能实现吗？
-
属性
transform: scale（缩放倍数）;
transform: scale(X轴缩放倍数，Y轴缩放倍数）;
-
技巧
通常，只为scale(）设置一个值，表示 X 轴和 Y 轴等比例缩放取值大于1表示放大，取值小于1表示缩小
. box{
width: 300px;
height: 210px;
margin: 100px auto;
background-color: pink;
}
.box img {
width: 100%;
transition: all 0.5s;
}
.box:hover img {
/＊修改宽高尺寸，从左上角开始缩放 */
/* width: 500px;
height: 400px;*/
从中心开始缩放
/* 大于1，表示放大 */
transform: scale(2);
/* 小于1，表示缩小 */
transform: scale(0.5);
/* 等于1，不变＊/
transform: scale(1);
1.7平面转换﹣倾斜 属性 transform: skew(); ● 取值 角度度数 deg
div {
margin: 100px auto;
width: 100px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover {
transform: skew(30deg);
transform: skew(-30deg);
}
1.8径向渐变
作用：给按钮添加高光效果
-
属性
background-image: radial-gradient(
半径 at 圆心位置，
颜色1终点位置，
颜色2 终点位置，
.....
);
-
取值
半径可以是2条，则为椭圆
圆心位置取值：像素单位数值／百分比／方位名词
button { width: 100px; height: 40px; background-color: Ogreen; border: 0; border-radius: 5px; color: ■#fff; background-image: radial-gradient( 30px at 30px 20px, □rgba(255, 255, 255, 0.2), transparent ); }div { width: 100px; height: 100px; background-color: pink; border-radius: 50%; background-image: radial-gradient( 50px at center center, red, pink ）； background-image: radial-gradient( 50px 20px at center center, red, pink ）； }
1.9空间转换
-
空间：是从坐标轴角度定义的X、Y和 Z三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
-
空间转换也叫 3D转换
-
属性：transform
1.10空间转换 - 平移 属性 transform: translate3d(x, y, z); transform: translatex(); transform: translateY(); transform: translateZ(); ● 取值（正负均可） ◆ 像素单位数值 ◆ 百分比（参照盒子自身尺寸计算结果）
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: Mpink;
transition: all 0.5s;
}
.box:hover {
/* 电脑是平面，默认无法观察 Z 轴平移效果 */
/* transform: translate3d(100px, 200px, 300px); */
/* 3d 小括号里面必须逗号隔开三个数 */
/* transform: translate3d(100px, 200px); */
transform: translatex(100px);
transform: translatey(-100%);
transform: translatez(300px);
}
1.11视距 perspective 作用：指定了观察者与Z=O平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚 属性：（添加给父级，取值范围800-1200) perspective: 视距；
/* 视距属性必须添加给直接父级 */ .father{ perspective: 1000px; } .son { width: 200px; height: 200px; margin: 100px auto; background-color: Mpink; transition: all 0.5s; } .son:hover{ transform: translatez(-300px); transform: translateZ(300px); }.box { /＊透视效果：近大远小，近实远虚＊/ perspective: 1000px; } .box img:hover { transform: rotatex(60deg); transform: rotatex(-60deg); }
1.12空间 - 旋转 ● transform: rotateZ（值）;
● transform: rotateX（值）;
● transform: rotateY（值）; 左手法则﹣根据旋转方向确定取值正负 左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
一般父级加一个 /＊透视效果：近大远小，近实远虚＊/ perspective: 1000px; 拓展
rotate3d(x, y, z, 角度度数）：用来设置自定义旋转轴的位置及旋转的角度
x,y, z取值为0-1之间的数字
1.13立体呈现 - transform-style 作用：设置元素的子元素是位于3D空间中还是平面中 属性名：transform-style 属性值： □ flat：子级处于平面中 ■ preserve-3d：子级处于 3D 空
1.14空间转换 ﹣缩放 属性 transform: scale3d(x, y, z);
transform: scalex(); transform: scaley(); transform: scalez();
transition: all 0.5s; transform-style: preserve-3d;
一般缩放的对象都要有这两个属性
二
1.1动画﹣animation
过渡：实现两个状态间的变化过程 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
1.2动画 - animation . 实现步骤
-
定义动画 @keyframes 动画名称{
from {}
to {}
}
-
@keyframes 动画名称｛ 0% {} 10% { ...... 100%{}
}
-
使用动画 animation：动画名称 动画花费时长；
.box {
width: 200px;
height: 100px;
background-color: ■pink;
animation: change 1s;
}
/* 动画一：宽度从200变化到800*/
@keyframes change {
from {
width: 200px;
}
to{
width: 800px;
}
/* 动画二：从200*100 变化到300*300 变化到800*500 *//* 百分比：表示的意思是动画时长的百分比＊/
@keyframes change {
0% {
width: 200px;
height: 100px;
}
20% {
width: 300px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
1.3动画 - animation animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态； 提示： 动画名称和动画时长必须赋值 取值不分先后顺序 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
.box {
width: 200px;
height: 100px;
background-color: pink;
/* linear: 匀速 */
animation: change 1s linear;
/* steps：分步动画，工作中，配合精灵图实现精灵动画＊/
animation: change 1s steps(3);
/＊如果有两个时间，第一个是动画时长，第二个是延迟时间 */
animation: change 1s 2s;
/* 重复次数，infinite: 无限循环 */
animation: change 1s 3;
animation: change 1s infinite;
/* alternate: 反向＊/
animation: change 1s infinite alternate;
/* 动画执行完毕时的状态，forwards：结束状态；backwards：开始状态（默认）*/
animation: change ls backwards;
animation: change 1s forwards;
}
/* 宽度 从 200 变化到 800 */
@keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
1.4动画﹣逐帧动画 属性animation-timing-function 作用速度曲线 取值steps（数字）：逐帧动画
三
1.1
媒体查询 思考 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
媒体查询 媒体查询能够检测视口的宽度，然后编写差异化的CSS样式 当某个条件成立，执行对应的CSS样式
@media（媒体特性） 选择器｛ CSS属性 } }
/* 当视口宽度是375，网页背景色是绿色 */
@media (width:375px) {
body {
background-color: Ogreen;
}
1.2rem 思考 ● 设备宽度不同，HTML标签字号设置多少合适？ 设备宽度大，元素尺寸大
设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的1/10
1.3rem-flexible.js ● flexible.js 是手淘开发出的一个用来适配移动端的js 库。 核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body> ...... <script src="./js/flexible.js"></script> </body>
rem﹣移动适配 ● 目标：计算68px是多少个rem?（设计稿适配375px视口） ·N*37.5=68 ·N= 68/37.5 . rem单位尺寸 1．确定基准根字号
查看设计稿宽度→确定参考设备宽度（视口宽度）→确定基准根字号（1/10视口宽度）
2.rem单位的尺寸 rem单位的尺寸＝px单位数值／基准根字号
1.4less - 简介 Less是一个CSS预处理器，Less文件后缀是．less。扩充了CSS 语言，使CSS具备一定的逻辑性、计算力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件 VS Code 插件Easy LESS保存 less文件后自动生成对应的CSS文件
less - 注释 注释： ● 单行注释 > 语法：/／注释内容 > 快捷键：ctrl+/ ● 块注释 > 语法：/* 注释内容＊/ ＞快捷键：Shift+Alt+A
less - 运算 运算： ● 加、减、乘直接书写计算表达式
● 除法需要添加 小括号 或．
less - 嵌套 作用：快速生成后代选择器
less - 变量 概念：容器，存储数据 作用：存储数据，方便使用和修改 语法： ＞定义变量：＠变量名：数据； ＞使用变量：CSS属性：＠变量名；
less﹣导出 写法：在less 文件的第一行添加 // out：
存储URL 提示：文件夹名称后面添加/
// out:./index.css // out:./css/
less﹣禁止导出
写法：在less 文件第一行添加：// out: false
四
1.1
适配方案 ● 相对单位 ● 相对视口的尺寸计算结果
vw: viewport width 1vw=1/100视口宽度
vh:viewport height 1vh=1/100视口高度
vh单位问题 ● 思考：开发中，能不能vw和vh混用呢？ 不能 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
