純css3怎么實(shí)現(xiàn)走馬燈效果

小編給大家分享一下純css3怎么實(shí)現(xiàn)走馬燈效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、三河ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的三河網(wǎng)站制作公司

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

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

純css3怎么實(shí)現(xiàn)走馬燈效果

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

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


<div class="wapper"> <!--場(chǎng)景-->
<div class="rotate"> <!--容器-->
<div class="item itemOne">1</div> <!--六個(gè)面-->
<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場(chǎng)景：


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

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


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

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


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

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


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

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


.rotate:hover{
-webkit-animation-play-state:paused; /*設(shè)置動(dòng)畫狀態(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怎么實(shí)現(xiàn)走馬燈效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：純css3怎么實(shí)現(xiàn)走馬燈效果
網(wǎng)頁(yè)URL：http://muchs.cn/article8/igegip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、定制開(kāi)發(fā)、微信公眾號(hào)、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

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

成都網(wǎng)站建設(shè)公司