1、动画效果
1、过渡动画（transition）
位置：添加到发生变化的标签的最初位置（即不是添加到标签的点击事件重中）
方式1：
对标签的所有样式都添加动画效果 transition: all 1s;
方式2：
对部分样式添加动画效果 transition: width 1s , box-shadow 5s;
时间的单位可以是s也可以是ms
例如下面的代码：
<style>
#box{
height: 200px;
width: 200px;
background-color: pink;
/* transition: all 1s; */
transition: width 1s , box-shadow 5s;
}
/* 添加鼠标悬浮事件 */
#box:hover{
width: 500px;
/* 阴影向右偏移量，阴影向下偏移量，阴影范围，重阴影范围，阴影颜色 */
box-shadow: 5px 6px 30px 10px rgba(19, 29, 226, 0.5);
}
</style>2、仿射变换（transform）
transform属性在CSS中用于应用2D和3D转换效果，如旋转、缩放、平移等。它主要有以下几个属性值：
1、translate()：移动元素的位置。（数值可以是正数或负数，单位px）
transform: translateX(50px); X轴正方向(向右)平移50px
transform: translateY(50px); Y轴正方向(向下)平移50px
transform: translateZ(50px); Z轴正方向平移50px
transform: translate(50px,20px); 向右50px,向下20px
2、rotate()：旋转元素。其参数为rotate(angle)，angle表示旋转角度，正值为顺时针，负值为逆时针。
transform: rotateX(90deg); 沿X轴顺时针旋转90度
transform: rotateY(90deg); 沿Y轴顺时针旋转90度
transform: rotateZ(90deg); 沿Z轴顺时针旋转90度
transform: rotate(20deg); 沿Z轴顺时针旋转90度
3 、scale()：参数小于1缩小，参数大于1放大。transform: scaleX(0.5); 水平方向上缩小
transform: scaleY(0.5); 水平方向上缩小
transform: scaleZ(0.5); 水平方向上缩小
transform: scale(0.5); 整体缩小
4、skew()：倾斜元素。
transform: skew(20deg); 水平方向上倾斜20度
transform: skewX(20deg); 水平方向上倾斜20度
transform: skewY(20deg); 垂直方向上倾斜20度
transform: skew(20deg,50deg); 水平方向倾斜20度，垂直方向倾斜50度
5、perspective()：设置元素的透视效果。其参数为perspective(distance)，distance表示观察者与元素的距离，值越大，透视效果越明显。例如，perspective(500px)表示设置元素与观察者相距500像素时的透视效果。
相关属性：
transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。
transform-origin属性有如下用法：
- 水平方向有left | center | right三个值。
- 垂直方向有 top | center | bottom 三个值。
所以transform-origin属性一共有九个值，可以根据实际需要设置。
transform-origin: 100px 200px; 旋转点距离元素左边100px，距离元素上边200px
transform-origin: left 200px; 旋转点在左边，距离元素上边200px
transform-origin: center center; 旋转点在元素正中心
transform-origin: right bottom; 旋转点在元素右下方
transform-origin: left; 旋转点在左边（默认左边框中间）3、关键帧动画
视频都是一帧一帧的，通过设置每一帧的状态，产生动画的效果
@keyframes 规则名{ }用来定义动画规则，确定每一帧的状态。
在产生动画的标签样式中添加 animation 属性，并设置相应的属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键帧动画</title>
<style>
.box{
height: 500px;
width: 500px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
background-color: aquamarine;
}
.box>.nei{
height: 300px;
width: 100px;
margin: 0 auto;
margin-top: 100px;
background-color: rgb(215, 91, 91);
/* 关键帧动画：规则名称为AAA 动画时长为1s 无限循环 匀速 */
animation: AAA 5s infinite linear;
}
/* 定义动画规则 */
@keyframes AAA{
/* 动画初始的时候的状态 */
0%{
transform: rotateZ(0deg);
}
/* 动画执行25%的时候的状态 */
25%{
transform: rotateZ(90deg);
}
/* 动画执行完的时候的状态 */
100%{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="nei">
你好
</div>
</div>
</body>
</html>上述代码的运行效果如下：
2、响应式布局
根据浏览器窗口或设备的大小调整页面结构
1、流式布局：百分比布局，单位为%，一般参考父标签转换像素。
2、视口布局：vw（view width） vh（view height），
把当前窗口的宽度分成100等份，1vw就是一份；
把当前窗口的高度分为100等分，1vh就是一份。
3、媒体查询+em+rem：媒体查询用于监听屏幕大小，
1em = 父标签字体大小（父亲没有看爷爷，一层一层往上找）
1rem = html标签字体的大小
注意：1、当em用在非font-size，会参考当前标签的字体大小（例如：当前
div宽度设置为2em，则就是当前div所对应的字体大小的2倍）
2、当rem用在非font-size，依旧会参考html的字体大小
4、栅格布局：bootsrtrap.css库
5、网格布局：display:grid
6、弹性布局：移动端的神器
7、传统布局（盒模型+浮动+定位）
2.1、媒体查询
将样式填写在@media内，当浏览器窗口满足后面的条件的时候，会采用对应的样式。
格式：@media screen and (条件1) and (条件2){ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
span{
color: red;
font-size: 100px;
}
/* 当浏览器窗口小于等于1200的时候 */
@media screen and (max-width:1200px){
span{
color: blue;
font-size: 50px;
}
}
/* 当浏览器窗口小于等于1000的时候，大于等于900的时候 */
@media screen and (max-width:1000px) and (min-width:900px){
span{
color: rgb(226, 29, 184);
font-size: 50px;
}
}
/* 当浏览器窗口小于等于800的时候 */
@media screen and (max-width:800px){
span{
color: rgb(0, 255, 4);
font-size: 25px;
}
}
</style>
</head>
<body>
<span>你好</span>
</body>
</html>上述代码运行结果如下：
3、伪元素选择器
伪元素选择器，用CSS去伪装标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: pink;
}
.box::before{
/* 向标签中填充内容 */
content: "111111";
}
.box::after{
content: "222222";
color:green;
font-size: 25px;
}
</style>
</head>
<body>
<div class="box">
这是box
</div>
</body>
</html>上述代码运行效果如下：
4、弹性布局
1、使用Flex布局后，子元素不再需要自己控制其在父元素中的位置，而是由父元素的Flex
布局属性来控制。
2、flex布局改变的不是自身，而是自己内部的子元素。也就是说，定义时要将flex定义在
父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。
3、在Flex布局中，子元素的float、clear都失效了。也就是说，使用Flex布局后，子元素就
不需要再使用float属性进行浮动，父元素也不需要再使用clear属性来清除浮动。同
时，设置了flex的元素，子元素会“块状化”，即父元素使用了display:flex其子元素都会
变成块级元素。
语法：对需要设置成弹性容器的标签添加 display:flex 样式
1、弹性容器内容有两个轴：主轴、交叉轴（另一个轴）
主轴：默认 从左到右
交叉轴：默认 从上到下
2、弹性容器中的子标签（子代亲儿子标签），叫弹性子元素
3、弹性容器的所有样式，仅仅对弹性子元素有效（即仅对亲儿子有效）
如果标签设置为弹性容器：
1、所有弹性子元素会按主轴的方向排列。
2、如果弹性子元素的标签没有设置高度，会撑满父元素高度。
3、如果弹性子元素的总宽度大于父元素的宽度，那么弹性容器会自动计算分配给弹性子元素的宽度，进行重新分配（即不会自动换行，会挤压）
1、将当前容器设置成弹性布局
display: flex;
2、改变主轴方向
flex-direction: column; 主轴为垂直方向（从上到下）
flex-direction: row; 默认值，主轴为水平方向（从左到右）
3、主轴上的排布方式
justify-content: ;
4、另一个轴上面(交叉轴)的排布方式
align-content: ; 多行
align-items: ; 主要设置单行（也可设置多行）
/* 4.1、主轴方向上 */
justify-content: center; /* 紧凑居中排列 */
justify-content: end; /* 从末尾处排列 */
justify-content: start; /* 从开始处排列 */
justify-content: space-around; /* 间隔：121 */
justify-content: space-between; /* 间隔：010 */
justify-content: space-evenly; /* 间隔：111 */
/* 4.2、交叉轴方向上-单行 */
align-items: center; /* 居中（多行时不紧凑） */
align-items: end; /* 紧靠末尾处（多行时不紧凑） */
align-items: start; /* 紧靠开始处（多行时不紧凑） */
/* 4.3、交叉轴方向上-多行 */
align-content: center; /* 紧凑居中 */
align-content: end; /* 紧凑紧靠末尾处 */
align-content: start; /* 紧凑紧靠开始处 */
align-content: space-around; /* 间隔：121 */
align-content: space-between; /* 间隔：010 */
align-content: space-evenly; /* 间隔：111 */
5、换行
flex-wrap: nowrap; 不允许换行，默认值
flex-wrap: wrap; 允许换行
flex-wrap: wrap-reverse; 允许换行，但是换行后的弹性子容器排列相反，变成从右到左或从下到上
6、让弹性子元素会占据剩余的全部空间（设置在弹性子容器的样式里）
方式1：flex-grow: 1; （代表只有flex-grow为1）
方式2：flex: 1; （代表flex-grow为1，flex-shrink为1，flex-basis为0）
7、弹性子元素在挤压的时候是否会缩小（设置在弹性子容器的样式里）
flex-shrink:0 表示不允许缩小
flex-shrink:1 表示允许缩小
2518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
