溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用css3實現(xiàn)走馬燈效果

發(fā)布時間：2021-07-30 16:49:36 來源：億速云 閱讀：221 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“怎么用css3實現(xiàn)走馬燈效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么用css3實現(xiàn)走馬燈效果”吧!

純css3實現(xiàn)了一個正六邊形的走馬燈效果，記錄一下css3動畫的學(xué)習(xí)情況，效果如下：

怎么用css3實現(xiàn)走馬燈效果

主要用到的css3技術(shù)有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一點平面幾何知識（計算間距、角度啥的），詳細(xì)過程如下：

首先設(shè)計一下要顯示的布局（俯視圖），途中垂直的線為輔助線，計算偏移量時需要用的：

怎么用css3實現(xiàn)走馬燈效果

紅色框框為旋轉(zhuǎn)面（即走馬燈效果的結(jié)構(gòu)最終以該面的中點為旋轉(zhuǎn)軸旋轉(zhuǎn)的），六個面也都是基于這個面做的布局，先看紅框下面的三個面，左側(cè)的面原本在藍(lán)色線處，通過旋轉(zhuǎn)到達(dá)綠色線處，右邊同理，中間的面只需要在Z軸方向移動二分之根號三個邊長的距離即可，所有的面均通過偏移和旋轉(zhuǎn)的方式達(dá)到上圖的結(jié)構(gòu)，需要注意的是要保證有圖案的面（本例中使用的是文字，思路一致）要向外，比如上面中間的面，在Z軸向外偏移二分之根號三個邊長的距離之后還要以中點為圓心旋轉(zhuǎn)180°，所有的面同理易得。在此過程中需要牢記的一點技術(shù)是：三維坐標(biāo)系中，從坐標(biāo)原點出發(fā)，向著坐標(biāo)軸的正方向看去，逆時針旋轉(zhuǎn)時rotate(X/Y/Z)的值為正數(shù)，順時針旋轉(zhuǎn)時，rotate(X/Y/Z)值為負(fù)數(shù)。

設(shè)置結(jié)構(gòu)：一個3D場景、一個走馬燈的旋轉(zhuǎn)面和走馬燈的六個面：

代碼如下:


<div class="wapper">        <!--場景-->
   <div class="rotate">   <!--容器-->
       <div class="item itemOne">1</div>  <!--六個面-->
       <div class="item itemTwo">2</div>
       <div class="item itemThree">3</div>
       <div class="item itemFour">4</div>
       <div class="item itemFive">5</div>
       <div class="item itemSix">6</div>
   </div>        
</div>

設(shè)置3D場景：

代碼如下:


.wapper{
   -webkit-perspective:800;    /*觀察距離800*/
   -webkit-perspective-origin:50% -100%;    /*從正前方上方斜向下觀察*/
   width:400px;
   height:300px;
   margin:100px auto;
}

設(shè)置旋轉(zhuǎn)面：

代碼如下:


@-webkit-keyframes rotation{      /*動畫過程*/
   0%{-webkit-transform:rotateY(0deg);}    
   100%{-webkit-transform:rotateY(-360deg);}
}
.rotate{
   -webkit-transform-style:preserve-3d;     /*3D變換*/
   -webkit-animation: rotation 6s infinite;  /*動畫名稱、時間、循環(huán)動畫*/
   -webkit-animation-timing-function: linear;  /*勻速動畫*/
   -webkit-transform-origin:center;      /*沿中間旋轉(zhuǎn)*/
   width:100%;
   height:100%;
   position:relative;   /*相對定位布局*/
}

對六個面除了位置之外的通用樣式做設(shè)置：

代碼如下:


.item{
   -webkit-transform-origin:center;  /*均沿中心旋轉(zhuǎn)*/
   width:198px;
   height:300px;
   position:absolute;   /*絕對定位在旋轉(zhuǎn)面上*/
   background:none;
   text-align:center;
   line-height:300px;
}

分別設(shè)置六個面的位置，以一號為例（上面結(jié)構(gòu)圖中紅框下面左邊綠色線標(biāo)注的面），所有的數(shù)值均需要經(jīng)過幾何計算得來：

代碼如下:


.itemOne{
   left:-50px;
   -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z軸向外移動87px，沿Y軸方向旋轉(zhuǎn)-60&deg;*/
   background:#f00;
}

在鼠標(biāo)懸浮在該結(jié)構(gòu)上時動畫停止：

代碼如下:


.rotate:hover{
   -webkit-animation-play-state:paused;  /*設(shè)置動畫狀態(tài)*/
}

本例子只有在webkit內(nèi)核的瀏覽器中可以查看效果，如需兼容其他現(xiàn)代瀏覽器，需添加 -moz- 等前綴，完整代碼如下：

代碼如下:


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Animation Test</title>
   <style>
   *{margin:0;padding:0;}
   @-webkit-keyframes rotation{    
       0%{-webkit-transform:rotateY(0deg);}    
       100%{-webkit-transform:rotateY(-360deg);}
   }
   .wapper{
       -webkit-perspective:800;
       -webkit-perspective-origin:50% -100%;
       width:400px;
       height:300px;
       margin:100px auto;
   }
   .rotate{
       -webkit-transform-style:preserve-3d;
       -webkit-animation: rotation 6s infinite;
       -webkit-animation-timing-function: linear;
       -webkit-transform-origin:center;
       width:100%;
       height:100%;
       position:relative;
   }
   .item{
       -webkit-transform-origin:center;
       width:198px;
       height:300px;
       position:absolute;
       background:none;
       text-align:center;
       line-height:300px;
   }
   .itemOne{
       left:-50px;
       -webkit-transform:translateZ(87px) rotateY(-60deg);
       background:#f00;
   }
   .itemTwo{
       left:100px;
       -webkit-transform:translateZ(173px);
       background:#ff0;
   }
   .itemThree{
       left:250px;
       -webkit-transform:translateZ(87px) rotateY(60deg);
       background:#0ff;        
   }
   .itemFour{
       left:250px;
       -webkit-transform:translateZ(-87px) rotateY(120deg);    
       background:#0f0;
   }
   .itemFive{
       left:100px;
       -webkit-transform:translateZ(-173px) rotateY(180deg);
       background:#0ff;
   }
   .itemSix{
       left:-50px;
       -webkit-transform:translateZ(-87px) rotateY(-120deg);
       background:#00f;
   }
   .rotate:hover{
       -webkit-animation-play-state:paused;
   }
   </style>
</head>
<body>
   <div class="wapper">
       <div class="rotate">
           <div class="item itemOne">1</div>
           <div class="item itemTwo">2</div>
           <div class="item itemThree">3</div>
           <div class="item itemFour">4</div>
           <div class="item itemFive">5</div>
           <div class="item itemSix">6</div>
       </div>        
   </div>
</body>
</html>

到此，相信大家對“怎么用css3實現(xiàn)走馬燈效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手