這篇文章主要介紹css3動(dòng)畫之添加多種變換效果的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、尼木網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為尼木等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

在之前的文章【css3動(dòng)畫之transform屬性與transition屬性的簡單使用】中介紹了添加一種變換效果實(shí)現(xiàn)簡單動(dòng)畫變換的方法，但是只有一種變換效果的動(dòng)畫太單調(diào)了，如何添加多種變換效果？下面我們就給大家介紹添加多種變換效果的方法。

首先我們來看看一個(gè)元素多種變換是什么樣的？

左側(cè)的框開始為小而綠色的方形角，而右側(cè)的框較大，帶有紅色邊框和圓角。將鼠標(biāo)懸停在任一框上觸發(fā)動(dòng)畫，使方框1呈現(xiàn)方框2的外觀，反之亦然。

同樣，我們?nèi)匀恢皇褂肏TML和CSS來實(shí)現(xiàn)這一目標(biāo)。如果沒有CSS變換，兩個(gè)框仍然會(huì)改變它們的 邊框顏色，也可能是邊框半徑，但它會(huì)立即發(fā)生，而不是一秒鐘動(dòng)畫。

那么這樣的效果是如何實(shí)現(xiàn)的？

其實(shí)很簡單，要將多個(gè)轉(zhuǎn)換應(yīng)用于單個(gè)元素，只需使用空格一個(gè)接一個(gè)地列出它們。例：

html代碼：

<div id="submenu"></div>

css代碼：

#submenu {
  	width: 100px;
    height: 60px;
    margin: 100px auto;
    background-color: #eee;
    border: 2px solid green;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
#submenu:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
}

請注意，IE10現(xiàn)在不使用轉(zhuǎn)換前綴，但  轉(zhuǎn)換仍然需要-ms-。

這意味著當(dāng)你將鼠標(biāo)懸停在方框上時(shí)，它將在一秒鐘內(nèi)更改顏色，旋轉(zhuǎn)（rotate）和加倍（scale），如下所示：

說明：

transform屬性控制元素的旋轉(zhuǎn)，縮放，移動(dòng)，傾斜；

transition屬性實(shí)現(xiàn)元素的過渡效果，讓元素從一個(gè)狀態(tài)到另一個(gè)狀態(tài)，正真動(dòng)起來；

考慮到兼容性，需要使用前綴：-webkit-，-moz-，-o-，-ms-。

以上是css3動(dòng)畫之添加多種變換效果的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：css3動(dòng)畫之添加多種變換效果的方法
瀏覽地址：http://www.chinadenli.net/article40/pejeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、定制網(wǎng)站、ChatGPT、外貿(mào)建站、網(wǎng)站制作、品牌網(wǎng)站建設(shè)

廣告

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