1.2d移动
transform：translate（x,y） 移动 不脱标 不影响兄弟盒子的布局 括号里可以写px 可以写百分比
transform：translateX（） 水平方向移动
transform：translateY（） 垂直方向移动
如果只写一个值，默认是x 水平方向
translate（） 如果值是百分比的话，百分比的大小按照自身的宽度决定
要点：2d移动通常用作子盒子在父盒子中水平和垂直居中
以下为实现方式：
列举了两个方法作对比，可以发现，transform：translate（）百分比 可以省去计算的麻烦
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.box {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
/* 要求：要实现盒子在父盒子中水平且垂直居中 */
/* 方法一： */
position: absolute;
/* top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px; */
/* 方法二 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
2.2d旋转
transform：rotate（） 括号里单位是deg
旋转默认中心点是盒子中央，可以自己设置中心点 transform-orgin：left center right top center bottom 也可以跟具体的px 也可以跟百分比
案例：利用旋转制作箭头 方法分析：给盒子下边框和有边框，让盒子顺时针旋转45deg 就做到了三角
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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 {
position: relative;
width: 269px;
height: 30px;
border: 2px solid #000;
}
div::after {
content: "";
position: absolute;
top: 5px;
right: 15px;
width: 10px;
height: 10px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
transition: all .3s;
}
div:hover::after {
transform: rotate(-135deg);
top: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.2d缩放
transform：scale（）
括号里的值大于1是放大，小于1是缩小 也可以设置中心点
案例：实现图片的缩放。
小要点：要实现好看的动画效果，可以给盒子加overflow-hidden 这样会更加好看 还可以自己设定放大的中心点 与旋转一样。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.box {
overflow: hidden;
width: 300px;
height: 300px;
border-radius: 50%;
}
img {
width: 100%;
height: 100%;
transition: all .5s;
transform-origin: 220px 230px;
}
.box:hover img {
transform: scale(3);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/temps_2.jpg" alt="">
</div>
</body>
</html>
4.动画
第一步 ：先定义动画
第二步：使用动画
定义动画：@keyfroms+动画名称{
}
括号里可以写百分比 也可以写form+to
调用动画：animation: name duration timing-function delay iteration-count direction fill-mode;
animation：名字 持续时间 速度曲线 延时 循环次数 是否反向移动 是否停止在最后状态
特别记忆：infinite 循环播放 forwards 保持最后状态 速度曲线中有一个 steps（）步长，用几步完成动画
案例：大数据热点图案例
案例分析：要实现要求的波纹效果，首先应该考虑将盒子放在同一位置，可以给边框，但是不好看，所以考虑给盒子阴影，这样在定义动画时，改变盒子的宽高，就会是的阴影变大。
细节方面，注意阴影效果是在慢慢变浅，所以添加透明度效果。
波纹有先后之分，所以重点利用的是delay属性
<!DOCTYPE html>
<html lang="zh-CN">
<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>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 617px;
background: url(./images/map.png) no-repeat;
margin: 0 auto;
}
div[class^="city"] {
position: absolute;
top: 228px;
right: 196px;
}
.map .city-tb {
top: 498px;
right: 82px;
}
.map .city-gz {
top: 542px;
right: 196px;
}
.dotted {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #27ba9b;
}
div[class^="city"] div[class^="bw"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0px 0px 15px #27ba9b;
border-radius: 50%;
}
.bw1 {
animation: bowen 1.4s linear 0s infinite;
}
.bw2 {
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: bowen 1.4s linear .4s infinite;
}
.bw3 {
animation: bowen 1.4s linear .8s infinite;
}
/* 定义动画 */
@keyframes bowen {
0% {
width: 8px;
height: 8px;
opacity: 1;
}
50% {
width: 30px;
height: 30px;
/* transform: scale(5); */
opacity: 1;
}
100% {
width: 60px;
height: 60px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city-bj">
<div class="dotted"></div>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
</div>
<div class="city-tb">
<div class="dotted"></div>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
</div>
<div class="city-gz">
<div class="dotted"></div>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
</div>
</div>
</body>
</html>
steps动画：奔跑的北极熊
案例分析：图片长度为1600px 每一个图案宽高都为200px，所以只需要设置step步长为8步完成即可
案例补充：添加了背景动画的移动，北极熊的奔跑，以及北极熊从屏幕左边移动到屏幕中央的动画。
本案例，一共制作了三个动画，练习此案例， 帮助掌握速度曲线，是否循环，以及保留最后状态。
<!DOCTYPE html>
<html lang="zh-CN">
<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>
body {
/* background: url(./images/bj.webp) repeat; */
/* background: -webkit-linear-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); */
background: -webkit-linear-gradient(left, rgb(218, 102, 7), rgb(187, 65, 9), rgb(208, 107, 0))
}
.box {
z-index: 5;
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 100px;
/* margin: 0 auto; */
background: url(./images/bear.png) no-repeat;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 元素添加多个动画，要用逗号隔开 */
/* forwards 是保持最后状态，停留在最后的位置 */
animation: move 1s steps(8) infinite, run 2s linear forwards;
}
@keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes run {
0% {}
100% {
left: 50%;
transform: translateX(-50%);
}
}
.bg-hei {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 569px;
background: url(./images/bg2.png) repeat-x;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: dong 10s linear infinite;
}
.bg-bai {
z-index: 4;
position: absolute;
bottom: 0;
width: 100%;
height: 336px;
background: url(./images/bg1.png) repeat-x;
animation: dong 10s linear infinite;
}
@keyframes dong {
100% {
background-position: -3840px 0;
}
}
.son {
position: absolute;
top: 20px;
right: 100px;
width: 150px;
height: 150px;
/* background: -webkit-linear-gradient(left, yellow, green); */
background: url(./images/bj.webp) no-repeat center;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="bg-hei"></div>
<div class="bg-bai"></div>
<div class="box"></div>
<div class="son"></div>
</body>
</html>
