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:0;
            padding:0;
        }
        .box{
            width:500px;
            height:500px;
            border:1px solid #000;
            border-radius: 50%;
            margin:0 auto;
            margin-top:50px;
            position: relative;
        }
        .top{
            position: absolute;
            width:20px;
            height:500px;
            left:240px;
        }
        .top span{
            display: block;
            position: absolute;
            width:20px;
            height:20px;
            background-color: red;
            border-radius: 50%;
            text-align: center;
            animation: bottonone 20s linear infinite;
        }
        .top:nth-child(3){
            animation: loopone 20s linear infinite;
        }
        .top:nth-child(1){
            transform: rotate(60deg);
            animation: looptwo 20s linear infinite;
        }
        .top:nth-child(1) span{
            transform: rotate(-60deg);
            animation: topspanone 20s linear infinite;
        }
        .top:nth-child(2){
            transform: rotate(120deg);
            animation: loopthree 20s linear infinite;
        }
        .top:nth-child(2) span{
            transform: rotate(-120deg);
            animation: topspantwo 20s linear infinite;
        }

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


        .center{
            width:300px;
            height:300px;
            margin:0 auto;
            border:1px solid blue;
            border-radius: 50%;
            margin-top:100px;
            position: relative;
        }
        .center .botton{
            width:20px;
            height:300px;
            position: absolute;
            left:140px;
        }
        .botton span{
            display: block;
            width:20px;
            height:20px;
            background-color: yellow;
            position: absolute;
            border-radius: 50%;
            text-align: center;
            animation: loopone 20s linear infinite;
        }
        .botton:nth-child(3){
            animation: bottonone 20s linear infinite;
        }
        .botton span:nth-child(1){
            top:-10px;
        }
        .botton span:nth-child(2){
            bottom: -10px;
        }
        .botton:nth-child(1){
            transform: rotate(60deg);
            animation: bottontwo 20s linear infinite;
        }
        .botton:nth-child(2){
            transform: rotate(120deg);
            animation: bottonthree 20s linear infinite;
        }
        .botton:nth-child(1) span{
            transform: rotate(-60deg);
            animation: bottonspanone 20s linear infinite;
        }
        .botton:nth-child(2) span{
            transform: rotate(-120deg);
            animation: bottonspantwo 20s linear infinite;
        }
        //设置外圆1和4 的父元素和内圆 1和4旋转
        @keyframes loopone {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        //设置外圆 2和5 的父元素旋转
        @keyframes looptwo {
            from{
                transform: rotate(60deg);
            }

            to{
                transform: rotate(420deg);
            }
        }
        //设置外圆 3和6 的父元素旋转
        @keyframes loopthree {
            from{
                transform: rotate(120deg);
            }

            to{
                transform: rotate(480deg);
            }
        }
        //设置外圆 1和4 旋转
        @keyframes topspanone {
            from{
                transform: rotate(-60deg);
            }
            to{
                transform: rotate(-420deg);
            }
        }
        //设置外圆 2和5 旋转
        @keyframes topspantwo {
            from{
                transform: rotate(-120deg);
            }
            to{
                transform: rotate(-480deg);
            }
        }
        //设置内圆 1和4 旋转
        @keyframes bottonspanone {
            from{
                transform: rotate(-60deg);
            }
            to{
                transform: rotate(300deg);
            }
        }
        //设置内圆 2和5 旋转
        @keyframes bottonspantwo {
            from{
                transform: rotate(-120deg);
            }
            to{
                transform: rotate(240deg);
            }
        }
    //设置内圆 1和4 父元素旋转
        @keyframes bottonone {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(-360deg);
            }
        }
        //设置内圆 2和5 父元素旋转
        @keyframes bottontwo {
            from{
                transform: rotate(60deg);
            }
            to{
                transform: rotate(-300deg);
            }
        }
        //设置外圆3和6 与内圆3和6的父元素 旋转
        @keyframes bottonthree {
            from{
                transform: rotate(120deg);
            }
            to{
                transform: rotate(-240deg);
            }
        }
    </style>

本文只为个人学习使用，不足之处请留言。