前言
今天要介绍的是2D动画效果,主要包括2D动画的定位、旋转、缩放。
先来一波动画效果展示,后面会具体到每一个案例。
进度条
盒子旋转
盒子放缩
一、过渡动画效果简述 transition:
1、代码示例
transition: all .5s 1s; 过渡属性,过渡时间,过渡曲线,停止间隔（上述没有书写过渡函数,过渡函数不常使用）
代码如下：
<!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> /* 进度条效果 */ .nav { margin: 20px; width: 200px; height: 15px; border-radius: 7px; border: red 1px solid; padding: 1px; } /* 哪个模块发生变化将transition加在哪个盒子内 */ .nav1 { width: 100px; height: 15px; border-radius: 7px; background-color: red; transition: all .5s 1s; } /* 经过.nav则.nav1发生变化,颜色变蓝 */ .nav:hover .nav1 { width: 150px; background-color: blue; } </style> </head> <body> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> <div class="nav"> <div class="nav1"></div> </div> </body> </html>
2、效果展示
二、定位translate
1、2D定位 transform: translate(50%, 50%);
百分比是相对于盒子左上角为原点,向右向下移动了多少。 可以将transform加在子代元素中,也可以加在hover内。
①.代码示例
代码如下：
<!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> <!-- 固定盒子的方式有定位,浮动,外边距等 以上方式盒子定位容易影响到其他盒子的位置 2D盒子定位的盒子不会影响到其他盒子的位置,只会覆盖其他盒子 --> <style> p { display: inline-block; width: 300px; height: 300px; background-color: turquoise; } p::before { content: ''; display: block; width: 50%; height: 50%; background-color: brown; /* 使用百分比的时候用的是该盒子长宽的百分比 */ transform: translate(50%, 50%); } </style> </head> <body> <p></p> </body> </html>
②.效果展示
背景盒子为浅蓝色,中间盒子为棕色,中间盒子大小为原来盒子的50% 而棕色盒子向右下偏移的长度又为棕色盒子的50%
2、2D定位 transform: translateY(-20px);【抬高】
在x轴或y轴移动一定的像素，有个兄弟是translateY 在这里就是进行了竖直方向的移动 • 1 • 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> <style> div { float: left; margin: 100px auto; width: 200px; height: 400px; background-color: cadetblue; color: #fff; font-size: 30px; font-family: '幼圆'; text-align: center; line-height: 200px; font-weight: 700; border: cyan 5px solid; transition: all .4s; } div:hover { box-shadow: 0px 20px 10px cyan; transform: translateY(-20px); } div::before { content: ''; display: block; width: 200px; height: 200px; background-size: 200px 200px; background-image: url(../1.jpg); } </style> </head> <body> <div>Hello</div> <div>Hello</div> <div>Hello</div> <div>Hello</div> <div>Hello</div> </body> </html>
②.效果展示
三、2D旋转 transform: rotate(180deg);
旋转180deg意思就是旋转180度（顺时针） transform-origin: left bottom; 这句话的意思是,以左下角为中心点（因为旋转默认是以中心为旋转点的）
1、代码示例
代码如下：
<!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 { overflow: hidden; position: relative; width: 300px; height: 300px; border: springgreen 5px solid; margin: 200px auto; } /* 这里不能旋转360度,旋转360度会使页面回到原始位置,给人一个没有旋转的假象 */ div::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; background-color: steelblue; transform-origin: left bottom; transform: rotate(180deg); transition: all .6s; } div:hover::before { transform: rotate(0); } </style> </head> <body> <div> </div> </body> </html>
2、效果展示
四、2D放缩
1、2D放缩 transform: scale(50%, 50%);
transform-origin: left bottom; 意思是按照左下角为固定中心,进行缩放 transform: scale(50%, 50%); 意思是缩放的宽、高为原来50%
①.代码示例
代码如下：
<!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> <!-- h盒子放缩是页面布局中不可缺少的一部分 可以根据transform-origin定位,使盒子依赖于某一位置进行缩放 --> <style> div { width: 300px; height: 300px; background-color: steelblue; transition: all .7s; border: red 3px solid; } div:hover { transform-origin: left bottom; transform: scale(50%, 50%); } </style> </head> <body> <div></div> </body> </html>
②.图片展示
2、2D放缩 transform: scale(1.25);
transform: scale(50%, 50%); 意思是缩放的宽、高为原来50% transform: scale(1.25); 意思是将图像放大为原来的1.25倍 是网页布局中常用到的一个动画效果。
①.代码示例
代码如下：
<!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 { overflow: hidden; margin: 200px auto; width: 200px; height: 200px; /* background-image: url(../two.png); */ } div img { transition: all .6s; width: 100%; height: 100%; } div:hover img { transform: scale(1.25); } </style> </head> <body> <div><img src="../two.png" alt=""></div> </body> </html>
②.图片展示
总结
过渡是动画效果中常用的技术,2D动画效果主要的三大方面要好好掌握,华丽的动画会带给人不一样的体验,但是由于动画效率较为低下不推荐使用过多的动画效果。
