目录
正文开始
1. 平面转换 - transform
作用:为元素添加动态效果,一般与过渡配合使用。
概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜),平面转换又叫 2D 转换。
1.1 平面转换 - 平移
属性:
transform: translate(x轴移动距离,y轴移动距离)
transform: translateX(x轴移动距离)
transform: translateY(y轴移动距离)
取值:
- 像素单位数值
- 百分比(参照盒子自身尺寸计算)
- 若只写一个数,则修改水平方向
- 正负均可,代表正反方向
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<style>
.father {
margin: 100px auto;
width: 400px;
height: 400px;
border: 1px solid black;
}
.son {
width: 150px;
height: 150px;
background-color: pink;
transition: all 1s;
}
.son:hover {
transform: translate(50%,50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
页面效果就是,当鼠标移动到子级盒子时,盒子会在父级盒子左上角移动到该位置:
1.2 平面转换 - 旋转
属性:
transform: ratate(旋转角度);
- 旋转角度单位为 deg,即度°
- 取值为正,顺时针旋转
- 取值为负,逆时针旋转
作用:旋转指定对象
例如:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
transform: ratate(360deg);
}
</style>
<body>
<div></div>
</body>
上述页面效果:鼠标悬停在盒子上时,盒子顺时针旋转360°
1.3 平面转换 - 改变转换原点
默认情况下,所有转换都是沿着盒子中心点转换的,转换原点默认就是合资的中心点
属性:
transform-origin: 水平原点位置 垂直原点位置;
取值:
- 方位名词:left、top、right、bottom、center
- 像素单位数值
- 百分比
作用:改变转换原点位置。
例如:
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 将原点调为盒子的右下角 */
transform-origin:right bottom;
}
div:hover {
/* 沿着盒子右下角旋转 */
transform: ratate(360deg);
}
</style>
<body>
<div></div>
</body>
1.4 平面转换 - 多重转换
作用:用一个标签来实现多个转换的实现
属性:
transform: translate() rotate();
- 先平移,再旋转
属性:
transform:rotate() translate();
- 先旋转,再平移
- 转换会改变坐标轴向
- 多重转换以第一种转换形态的坐标轴为准
若对同一个对象既要平移又要旋转,那么只能用多重转换的方式来实现,因为对于同一个 transform 属性会出现覆盖的情况。
例如:
<style>
div {
width: 100px;
height: 300px;
background-color: red;
transition: all 0.5s;
}
div:hover {
transform: translate(-50%,-50%) rotate(360deg);
}
</style>
<body>
<div></div>
</body>
1.5 平面转换 - 缩放
作用:对指定对象进行放大缩小
属性值:
transform: scale(缩放倍数);
transform:scal(X轴缩放倍数,Y轴缩放倍数);
取值:
- 第一种写法取值表示X轴和Y轴等比例缩放,取值大于1表示放大,取值小于1表示缩小
注:
- 若通过改变宽和高的方式进行缩放的话,是从左上角开始缩放。
- 若通过平面转换的方式进行缩放的话,是从转换原点开始缩放
例如:
<style>
div {
width: 100px;
height: 300px;
background-color: red;
transition: all 0.5s;
}
div:hover {
transform: scale(2);
/* transform: scale(1,2); */
}
</style>
<body>
<div></div>
</body>
1.6 平面转换 - 倾斜
作用:设置对象的倾斜角度
属性:transform: skew();
取值:
- 角度度数,单位为 deg
- 正数为向左偏
- 负数为向右偏
例如:
<style>
div {
width: 100px;
height: 300px;
background-color: red;
transition: all 0.5s;
}
div:hover {
transform: skew(40deg);
}
</style>
<body>
<div></div>
</body>
2. 渐变
渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景。
分类:
- 线性渐变:沿一条线渐变
- 径向渐变:从中心点向四周渐变
2.1 线性渐变
属性:
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
- 渐变方向(选写):
- 不写默认为从上到下
- to 方位名词
- 角度度数
- 终点位置(选写):
- 不写默认均分
- 百分比
例如:
<style>
.div1 {
width: 100px;
height: 100px;
background-color: red;
background-image: linear-gradient(
red,
green
);
}
.div2 {
width: 100px;
height: 100px;
background-color: red;
background-image: linear-gradient(
to right,
red,
green
);
}
.div3 {
width: 100px;
height: 100px;
background-color: red;
background-image: linear-gradient(
45deg,
red,
green
);
}
.div4{
width: 100px;
height: 100px;
background-color: red;
background-image: linear-gradient(
red 80%,
green
);
}
</style>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>
<br>
<div class="div4"></div>
</body>
页面效果:
2.2 径向渐变
作用:给按钮添加高光效果
属性:
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
)
取值:
- 半径可以是2条,此时为椭圆
- 圆心位置取值:像素单位数值 / 百分比 / 方位名词
例如:
<style>
.div1 {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink
);
}
.div2 {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px 20px at center center,
red,
pink
);
}
.div3 {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at 30px 50px,
red,
pink
);
}
.div4 {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
background-image: radial-gradient(
50px at center center,
red,
pink 50%
);
}
</style>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>
<br>
<div class="div4"></div>
</body>
页面效果:
完