文章目录
前言
今天要介绍的是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
在这里就是进行了竖直方向的移动
①.代码示例
代码如下：
<!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动画效果主要的三大方面要好好掌握,华丽的动画会带给人不一样的体验,但是由于动画效率较为低下不推荐使用过多的动画效果。