移动转换
平移
transform: translate(X轴移动距离, Y轴移动距离);
取值
像素单位数值
百分比(参照盒子自身尺寸计算结果)
正负均可
技巧
translate() 只写一个值,表示沿着 X 轴移动
单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()
定位居中
案例:双开门
<!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>
</head>
<style>
.window {
display: flex;
margin: 100px auto;
width: 1366px;
height: 600px;
background-image: url(./bg.jpg);
overflow: auto;
}
.window .left,
.window .right {
width: 50%;
height: 600px;
background-image: url(./fm.jpg);
transition: all 1s;
}
.window .right {
background-position: right 0;
}
.window:hover .left {
transform: translate(-100%);
}
.window:hover .right {
transform: translate(100%);
}
</style>
<body>
<div class="window">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
旋转
.father:hover img {
transform: rotate(360deg);
transform-origin: center center;
transition: all 2s;
}
多重转换
transform: translate() rotate();
···多重转换原理:以第一种转换方式坐标轴为准转换形态
1、旋转会改变网页元素的坐标轴向
2、先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果
缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
技巧
1、通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
2、取值大于1表示放大,取值小于1表示缩小
案例:播放效果
/* 1. 摆放播放按钮:图片区域的中间 */
.box li {
overflow: hidden;
}
.pic {
position: relative;
}
.pic::after {
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -29px;
margin-top: -29px; */
/* transform: translate(-50%, -50%); */
content: '';
width: 58px;
height: 58px;
background-image: url(./images/play.png);
transform: translate(-50%, -50%) scale(5);
opacity: 0;
transition: all .5s;
}
/* 2. hover效果:大按钮,看不见:透明是0 → 小按钮,看得见:透明度1 */
.box li:hover .pic::after {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
倾斜
渐变
线性渐变
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
1、渐变方向:可选
···to 方位名词
···角度度数
2、终点位置:可选
···百分比
<!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>
</head>
<style>
.box {
position: relative;
width: 300px;
height: 212px;
}
.box img {
width: 300px;
}
.box .title {
position: absolute;
left: 15px;
bottom: 20px;
width: 260px;
color: #fff;
font-size: 20px;
font-weight: 700;
z-index: 2;
}
.box .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
opacity: 0;
transition: all 0.5s;
}
.box:hover .mask {
opacity: 1;
}
</style>
<body>
<div class="box">
<img src="./product.jpeg" alt="">
<div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
<div class="mask"></div>
</div>
</body>
</html>
径向渐变
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
半径可以是2条,则为椭圆
圆心位置取值:像素单位数值 / 百分比 / 方位名词