您好,登錄后才能下訂單哦!
利用css3功能強(qiáng)大,我們可以直接完成旋轉(zhuǎn)動(dòng)畫的制作,而跳過復(fù)雜的javascript。
html代碼如下:demo01.html
<!DCTYPE html> <head> <meta type="utf-8"/> <title>旋轉(zhuǎn)動(dòng)畫</title> <link rel="stylesheet" type="text/css" href="demo01.css"> </head> <body> <div class="container"> <div id="around"> <figure>1<figure> <figure>2<figure> <figure>3<figure> <figure>4<figure> <figure>5<figure> <figure>6<figure> <figure>7<figure> <figure>8<figure> <figure>9<figure> </div> </div> </body> </html> css代碼如下:demo01.css .container{ width:210px; height:140px; position:relative; //3d視距,當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果,而不是元素本身 perspective:1000px; margin:50px auto 40px; } #around{ width:100%; height:100%; //規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素 transform-style:preserve-3d; position:absolute; //定義動(dòng)畫 animation:myMove 10s infinite; } #around figure{ display:block; position:relative; width:186px; height:116px; left:10px; top:10px; border:2px solid black; text-align:center; color:white; font-weight:bold; //與高度相等,使內(nèi)容垂直居中顯示 line-height:116px; } #around figure:nth-child(1){ transform: rotateY(0deg) translateZ(288px); background-color:red; } #around figure:nth-child(2){ transform: rotateY(40deg) translateZ(288px); background-color:orange; } #around figure:nth-child(3){ transform: rotateY(80deg) translateZ(288px); background-color:yellow; } #around figure:nth-child(4){ transform: rotateY(120deg) translateZ(288px); background-color:green; } #around figure:nth-child(5){ transform: rotateY(160deg) translateZ(288px); background-color:darkgreen; } #around figure:nth-child(6){ transform: rotateY(200deg) translateZ(288px); background-color:blue; } #around figure:nth-child(7){ transform: rotateY(240deg) translateZ(288px); background-color:purple; } #around figure:nth-child(8){ transform: rotateY(280deg) translateZ(288px); background-color:navy; } #around figure:nth-child(9){ transform: rotateY(320deg) translateZ(288px); background-color:pink; } #keyframes myMove{ from{ transform: rotateY(360deg); } to{ transform: rotateY(0deg); } }
完成后的圖示如下:
圖片可以自動(dòng)旋轉(zhuǎn)。修改animation屬性里的值可以實(shí)現(xiàn)無限循環(huán)(infinite)和多次循環(huán)(ease n).
如:animation:myMove 10s ease 2. myMove為動(dòng)畫函數(shù),10s為完成動(dòng)畫所用時(shí)間。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。