体验平面转换
<!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>体验平面转换</title>
<style>
div {
margin: 100px 0;
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
}
/* 鼠标滑过:添加动态效果 */
div:hover {
transform: translate(800px) rotate(180deg) scale(2) skew(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
平移效果
<!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>平移效果</title>
<style>
.father {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
.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);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
绝对定位元素居中
<!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>绝对定位元素居中效果</title>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
/* 向左向上移动自身尺寸的一半 */
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
双开门
<!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>双开门</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1. 布局:父子结构,父级是大图,子级是左右小图 */
.father {
display: flex;
margin: 0 auto;
width: 1366px;
height: 600px;
background-image: url(./images/bg.jpg);
overflow: hidden;
}
.father .left,
.father .right {
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all .5s;
}
.father .right {
/* right 表示的取到精灵图右面的图片 */
background-position: right 0;
}
/* 2. 鼠标悬停的效果:左右移动 */
.father:hover .left {
transform: translate(-100%);
}
.father:hover .right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
旋转效果
<!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>旋转效果</title>
<style>
img {
width: 200px;
transition: all 2s;
}
/* 鼠标悬停到图片上面,添加旋转效果 */
img:hover {
/* 正数:顺时针旋转;负数:逆时针旋转 */
transform: rotate(360deg);
transform: rotate(-360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
转换原点
<!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>转换原点</title>
<style>
img {
width: 200px;
border: 1px solid #000;
transition: all 1s;
transform-origin: right bottom;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
时钟-转换原点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.clock {
width: 250px;
height: 250px;
border: 8px solid #000;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
.line {
/* 1.定位 */
position: absolute;
width: 4px;
height: 250px;
background-color: #999;
left: 50%;
/* transform: translate(-50%); */
}
/* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 */
/* 一圈是360度, 等分成 xx 份 */
.line:nth-child(2) {
transform: translate(-50%) rotate(30deg);
}
.line:nth-child(3) {
transform: translate(-50%) rotate(60deg);
}
.line:nth-child(4) {
transform: translate(-50%) rotate(90deg);
}
.line:nth-child(5) {
transform: translate(-50%) rotate(120deg);
}
.line:nth-child(6) {
transform: translate(-50%) rotate(150deg);
}
/* 第一根和第四跟宽度大一些 */
.line:nth-child(1),
.line:nth-child(4) {
width: 5px;
}
/* 遮罩圆形 */
.cover {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 50%;
}
/* 表针 */
/* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */
.hour,
.minute,
.second {
position: absolute;
left: 50%;
/* 盒子底部在盒子中间 */
bottom: 50%;
}
.hour {
width: 6px;
height: 50px;
background-color: #333;
margin-left: -3px;
transform: rotate(15deg);
transform-origin: center bottom;
}
.minute {
width: 5px;
height: 65px;
background-color: #333;
margin-left: -3px;
transform: rotate(90deg);
transform-origin: center bottom;
}
.second {
width: 4px;
height: 80px;
background-color: red;
margin-left: -2px;
transform: rotate(240deg);
transform-origin: center bottom;
}
/* 螺丝 */
.dotted {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background-color: #333;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="clock">
<!-- 刻度线 -->
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<!-- 遮罩圆形 -->
<div class="cover"></div>
<!-- 表针 -->
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<!-- 螺丝 -->
<div class="dotted"></div>
</div>
</body>
</html>
多重转换效果
<!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>多重转换</title>
<style>
.box {
width: 800px;
height: 200px;
border: 1px solid #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); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="" />
</div>
</body>
</html>
缩放效果
<!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>缩放效果</title>
<style>
.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); */
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="" />
</div>
</body>
</html>
按钮缩放
<!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>按钮缩放</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
width: 100%;
}
.box {
width: 249px;
height: 210px;
margin: 50px auto;
}
.box p {
color: #3b3b3b;
padding: 10px 10px 0 10px;
}
/* 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;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic">
<img src="./images/party.jpeg" alt="" />
</div>
<p>【和平精英】“初火”音乐概念片:四圣觉醒......</p>
</li>
</ul>
</div>
</body>
</html>
倾斜效果
<!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>倾斜效果</title>
<style>
div {
margin: 100px auto;
width: 100px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover {
/* transform: skew(30deg); */
transform: skew(-30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
渐变-线性
<!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>
div {
width: 200px;
height: 200px;
background-color: green;
/* background-image: linear-gradient(
red,
green
); */
/* background-image: linear-gradient(
to right,
red,
green
); */
background-image: linear-gradient(
45deg,
red,
green
);
/* background-image: linear-gradient(
red 80%,
green
); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
产品展示
<!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>产品展示效果</title>
<style>
.box {
position: relative;
width: 300px;
height: 212px;
}
.box img {
width: 300px;
}
.box .title {
position: absolute;
left: 15px;
bottom: 20px;
z-index: 2;
width: 260px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
opacity: 0;
transition: all .5s;
}
.box:hover .mask {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="" />
<div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
<div class="mask"></div>
</div>
</body>
</html>
渐变-径向
<!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>
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
);
/* background-image: radial-gradient(
50px at 50px 30px,
red,
pink 50%
); */
}
button {
width: 100px;
height: 40px;
background-color: green;
border: 0;
border-radius: 5px;
color: #fff;
background-image: radial-gradient(
30px at 30px 20px,
rgba(255, 255, 255, 0.2),
transparent
);
}
</style>
</head>
<body>
<div></div>
<button>按钮</button>
</body>
</html>