久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

CSS變形、過渡的實例分析

這篇文章主要介紹“CSS變形、過渡的實例分析”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“CSS變形、過渡的實例分析”文章能幫助大家解決問題。

子洲網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。成都創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

1、過渡transition

過渡屬性用法：transition:ransition-propertytransition-durationtransition-timing-functiontransition-delay

可以一起指定也可以分別單獨指定

transition-property:是要過渡的屬性（如width，height），all是所有都改變。

transition-duration：花費的時間，單位為s或ms

transition-timing-function：是指定動畫類型（運動區(qū)曲線），運動曲線有以下幾種

ease=>逐漸慢下來（默認(rèn)值）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>

結(jié)果如下，當(dāng)鼠標(biāo)上上去后變化不再是瞬間完成，而是過渡完成。

2、變形transform

2D變形

移動translate(x,y)

移動可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于設(shè)置盒子定位時的居中對齊（在設(shè)置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>

點擊之后盒子進(jìn)行了移動。用于讓定位的盒子居中的代碼入下

<!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>

關(guān)于“CSS變形、過渡的實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

分享題目：CSS變形、過渡的實例分析
路徑分享：http://sd-ha.com/article26/iecdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)建站、網(wǎng)站制作、網(wǎng)站設(shè)計公司、企業(yè)網(wǎng)站制作、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)