CSS3 圓形動畫導航

因為圓一共分為六份，每兩份被一個父元素包裹，設定父元素旋轉，并且對沒一份再次設定旋轉，使文字始終保持是正文不會出現傾斜，不易觀看。

html

<div class="box">
    <div class="top">
        <span>1</span><span>4</span>
    </div>
    <div class="top">
        <span>2</span><span>5</span>
    </div>
    <div class="top">
        <span>6</span><span>3</span>
    </div>

    <div class="center">
        <div class="botton">
            <span>1-1</span><span>1-4</span>
        </div>
        <div class="botton">
            <span>1-2</span><span>1-5</span>
        </div>
        <div class="botton">
            <span>1-6</span><span>1-3</span>
        </div>
    </div>
</div>
           

css

<style>
        *{
            margin:;
            padding:;
        }
        .box{
            width:px;
            height:px;
            border:px solid #000;
            border-radius: %;
            margin: auto;
            margin-top:px;
            position: relative;
        }
        .top{
            position: absolute;
            width:px;
            height:px;
            left:px;
        }
        .top span{
            display: block;
            position: absolute;
            width:px;
            height:px;
            background-color: red;
            border-radius: %;
            text-align: center;
            animation: bottonone s linear infinite;
        }
        .top:nth-child(3){
            animation: loopone s linear infinite;
        }
        .top:nth-child(1){
            transform: rotate(deg);
            animation: looptwo s linear infinite;
        }
        .top:nth-child(1) span{
            transform: rotate(-deg);
            animation: topspanone s linear infinite;
        }
        .top:nth-child(2){
            transform: rotate(deg);
            animation: loopthree s linear infinite;
        }
        .top:nth-child(2) span{
            transform: rotate(-deg);
            animation: topspantwo s linear infinite;
        }

        .top span:nth-child(1){
            bottom:-px;
        }
        .top span:nth-child(2){
            top:-px;
        }


        .center{
            width:px;
            height:px;
            margin: auto;
            border:px solid blue;
            border-radius: %;
            margin-top:px;
            position: relative;
        }
        .center .botton{
            width:px;
            height:px;
            position: absolute;
            left:px;
        }
        .botton span{
            display: block;
            width:px;
            height:px;
            background-color: yellow;
            position: absolute;
            border-radius: %;
            text-align: center;
            animation: loopone s linear infinite;
        }
        .botton:nth-child(3){
            animation: bottonone s linear infinite;
        }
        .botton span:nth-child(1){
            top:-px;
        }
        .botton span:nth-child(2){
            bottom: -px;
        }
        .botton:nth-child(1){
            transform: rotate(deg);
            animation: bottontwo s linear infinite;
        }
        .botton:nth-child(2){
            transform: rotate(deg);
            animation: bottonthree s linear infinite;
        }
        .botton:nth-child(1) span{
            transform: rotate(-deg);
            animation: bottonspanone s linear infinite;
        }
        .botton:nth-child(2) span{
            transform: rotate(-deg);
            animation: bottonspantwo s linear infinite;
        }
        //設定外圓1和4 的父元素和内圓 1和4旋轉
        @keyframes loopone {
            from{
                transform: rotate(deg);
            }
            to{
                transform: rotate(deg);
            }
        }
        //設定外圓 2和5 的父元素旋轉
        @keyframes looptwo {
            from{
                transform: rotate(deg);
            }

            to{
                transform: rotate(deg);
            }
        }
        //設定外圓 3和6 的父元素旋轉
        @keyframes loopthree {
            from{
                transform: rotate(deg);
            }

            to{
                transform: rotate(deg);
            }
        }
        //設定外圓 1和4 旋轉
        @keyframes topspanone {
            from{
                transform: rotate(-deg);
            }
            to{
                transform: rotate(-deg);
            }
        }
        //設定外圓 2和5 旋轉
        @keyframes topspantwo {
            from{
                transform: rotate(-deg);
            }
            to{
                transform: rotate(-deg);
            }
        }
        //設定内圓 1和4 旋轉
        @keyframes bottonspanone {
            from{
                transform: rotate(-deg);
            }
            to{
                transform: rotate(deg);
            }
        }
        //設定内圓 2和5 旋轉
        @keyframes bottonspantwo {
            from{
                transform: rotate(-deg);
            }
            to{
                transform: rotate(deg);
            }
        }
    //設定内圓 1和4 父元素旋轉
        @keyframes bottonone {
            from{
                transform: rotate(deg);
            }
            to{
                transform: rotate(-deg);
            }
        }
        //設定内圓 2和5 父元素旋轉
        @keyframes bottontwo {
            from{
                transform: rotate(deg);
            }
            to{
                transform: rotate(-deg);
            }
        }
        //設定外圓3和6 與内圓3和6的父元素 旋轉
        @keyframes bottonthree {
            from{
                transform: rotate(deg);
            }
            to{
                transform: rotate(-deg);
            }
        }
    </style>
           

本文隻為個人學習使用，不足之處請留言。