這篇文章主要介紹“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變形、過渡的實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
