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>