CSS变形、过渡的实例分析
CSS变形、过渡的实例分析
这篇文章主要介绍“CSS变形、过渡的实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS变形、过渡的实例分析”文章能帮助大家解决问题。
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:width3sease-in-out0.5s;
}
p:hover{
width:500px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
2、变形transform
2D变形
移动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>
关于“CSS变形、过渡的实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
