1.使用css3實(shí)現(xiàn)大轉(zhuǎn)盤

先上效果圖,如圖所示:

最終效果
第一步:畫個(gè)父容器+12個(gè)子容器(扇葉)

將父容器居中,子容器使用absolute定位,基本代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            body {
                display: flex;
                height: 95vh;
                align-items: center;
                justify-content: center;
            }
            .container {
                position: relative;
                width: 150px;
                height: 150px;
                background-color: #008B64;
            }
            .item {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 150px;
                height: 80px;
                background-color: #A52A2A;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>

效果如圖:

初始頁(yè)面
第二步:將子容器改成等邊三角形

可以通過(guò)border來(lái)實(shí)現(xiàn)三角形的效果,border-left設(shè)置為none,border-top和boder-bottom設(shè)置寬度為40px并透明,border-right寬度設(shè)置為150px,同時(shí)我們需要將本身的width和height設(shè)置為0,background-color去掉。

以下css只顯示修改或者新增的屬性:

.item {  
    width: 0px;
    height: 0px;
    border: 40px solid transparent;
    border-left-width: 0px;
    border-right: 150px solid #A52A2A;
}

效果如圖所示

利用border實(shí)現(xiàn)三角形

第三步:將三角形的頂點(diǎn)對(duì)準(zhǔn)父容器中心

可以通過(guò)left和top進(jìn)行定位,這里使用了calc函數(shù),當(dāng)然,也可以在紙上計(jì)算出具體值填上來(lái)。

.item {
    top: calc(50% - 40px);
    left: 50%;
}

效果如下:

將三角形頂點(diǎn)對(duì)準(zhǔn)父容器中心

第四步:將子容器的變換原點(diǎn)設(shè)置到三角形的頂點(diǎn),并通過(guò)JavaScript將子容器圍繞原點(diǎn)旋轉(zhuǎn)一周

transfrom-origin設(shè)置三角形的變換原點(diǎn)到頂點(diǎn)的,使用jQuery逐個(gè)旋轉(zhuǎn)三角形,每個(gè)相差30度。

<style>
.item {
    transform-origin: 0px 50%;
}
</style>
<script type="text/javascript">
    $(function(){
        $('.item').each(function(index,item){
            $(item).css('transform','rotateZ('+ (index * 30) +'deg)');
        });
    });
</script>

效果如下:

旋轉(zhuǎn)三角形,圍成一圈

到這一步,核心的技巧已經(jīng)介紹完了,下面只是做些界面上的優(yōu)化。

第四步: 子容器單雙采用不同的顏色

.item:nth-child(odd){
    border-right-color: cornflowerblue;
}
.item:nth-child(even){
    border-right-color: #A52A2A;
}
單雙變色

第五步:使用keyframe讓大轉(zhuǎn)盤旋轉(zhuǎn)

.container {
    animation: run-rotate 3s ease-out infinite;
}
@keyframes run-rotate{
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(calc(360deg * 3));
    }
}

最終效果如下:

點(diǎn)擊查看效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,656評(píng)論 0 8
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,328評(píng)論 0 11
  • 1 前言 一直想沿著圖像處理這條線建立一套完整的理論知識(shí)體系,同時(shí)積累實(shí)際應(yīng)用經(jīng)驗(yàn)。因此有了從使用AVFounda...
    RichardJieChen閱讀 5,767評(píng)論 5 12
  • 1、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類名選擇器 . 通過(guò)類名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,656評(píng)論 0 7