1、过渡transition
过渡属性用法：transition:ransition-propertytransition-durationtransition-timing-functiontransition-delay
可以一起指定也可以分别单独指定
transition-property:是要过渡的属性（如width，height），all是所有都改变。
transition-duration：花费的时间，单位为s或ms
transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种
ease=>逐渐慢下来（默认值）linear=>匀速ease-in=>加速ease-out=>减速ease-in-out=>先加速在减速
transition-delay延迟时间，单位为s或ms
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
p{
width:100px;
height:200px;
background-color:aqua;
transition:width2sease-in-out0.5s;
}
p:hover{
width:500px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
2、变形transform
(1)、2D变形
（a）移动translate(x,y)
移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
p{
width:100px;
height:100px;
background-color:aqua;
transition:all2s;
}
p:active{
transform:translate(200px,200px);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
点击之后盒子进行了移动。用于让定位的盒子居中的代码入下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
.fa{
width:300px;
height:300px;
background-color:aqua;
transition:all0.5s;
position:relative;
}
.son{
background-color:red;
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<pclass="fa">
<pclass="son"></p>
</p>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55385.shtml
