Css3動(dòng)畫屬性是哪個(gè)

發(fā)布時(shí)間：2022-03-01 13:50:08 來源：億速云閱讀：116 作者：小新欄目：web開發(fā)

這篇文章主要介紹了Css3動(dòng)畫屬性是哪個(gè)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Transform動(dòng)畫屬性

transform屬性向元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

rotate3d(x,y,z,angle)x,y,z那個(gè)屬性1就圍繞那個(gè)軸轉(zhuǎn)動(dòng)角度deg

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<linkhref="css/index.css"rel="stylesheet"type="text/css"/>

</head>

<styletype="text/css">

margin:0px;

padding:0px;

}

img{display:block;}

.wrap{

border:1pxsolid#ff0000;

width:380px;

height:565px;

margin:0auto;

position:relative;

top:50px;

-webkit-animation:upDown2slinearinfinite;

}

@-webkit-keyframesupDown{

0%{-webkit-transform:translateY(0);}

50%{-webkit-transform:translateY(20px);}

100%{-webkit-transform:translateY(0px);}

}

@-webkit-keyframesrota_head{

0%{-webkit-transform:rotate(0);}

50%{-webkit-transform:rotate(-5deg);}

100%{-webkit-transform:rotate(0);}

}

.head{

border:1pxsolid#ff0000;

position:absolute;

top:10px;

left:0;

z-index:1;

-webkit-animation:rota_head2slinearinfinite;

}

@-webkit-keyframeseye_open{

0%{opacity:1;}

85%{opacity:1;}

90%{opacity:0;}

100%{opacity:1;}

}

.eye_open{

position:absolute;

top:25px;

left:40px;

-webkit-animation:eye_open2slinearinfinite;

}

@-webkit-keyframeseye_close{

0%{opacity:0;}

85%{opacity:0;}

90%{opacity:1;}

100%{opacity:0;}

}

.eye_close{

position:absolute;

top:37px;

left:40px;

-webkit-animation:eye_close2slinearinfinite;

}

.body{

position:absolute;top:25px;left:8px;

}

.foot{position:absolute;left:8px;bottom:0px;}

</style>

<body>

<div>

<imgsrc="imgs/sprite_43.png"alt="">

<imgsrc="imgs/shape_45.png"alt="">

<imgsrc="imgs/shape_46.png"alt="">

</div>

<div>

<imgsrc="imgs/sprite_40.png">

</div>

<div>

<imgsrc="imgs/shape_41.png">

</div>

</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css3動(dòng)畫屬性是哪個(gè)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

Css3動(dòng)畫屬性是哪個(gè)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽