使用css3構建一個摩天輪旋轉

一、摩天輪構建思路
1、自身繞圓旋轉（修改旋轉軸心）
@keyframes spin{
to{transform: rotate(1turn);}
}
.box .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;

2、繞圓旋轉，內容不轉
@keyframes spin{
to{transform: rotate(1turn);}
}
.box .ball{
animation:spin 3s infinite linear;
transform-origin: 50% 150px;
}
.box .inner{
animation:inherit;/*繼承上級的屬性*/
animation-name:spin-reverse;

}

二、實踐

demo1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        body{ margin: 50px; text-align: center;}
        h3{clear: both; overflow: hidden; text-align: left;}
        .box{
            border-radius:100%;
            padding: 20px;
            width: 300px;
            height: 300px;
            background: yellow;
            color: #fff;
            float: left;
        }
        .box .ball{
            border-radius: 100%;
            width: 50px;
            height: 50px;
            font:bold 14px/50px Arial;
            text-align: center;
            background: blue;
            margin: 0 auto;
        }
        @keyframes spin{
            to{transform: rotate(1turn);}
        }
        .box2 .ball{
            animation:spin 20s infinite linear;
            transform-origin: 50% 150px;
            /*transform-origin:50% 50%;*/
        }
        .box2 .ball .inner{
            animation:inherit;
            animation-direction:reverse;
        }
    </style>
</head>
<body>
    <div class="box box2">
        <div class="ball">
            <div class="inner">ball</div>
        </div>
    </div>
</body>
</html>

demo2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        body{ margin: 50px; text-align: center;}
        h3{clear: both; overflow: hidden; text-align: left;}
        .container{
            position:relative;
            width: 446px;
            height: 446px;
            background:yellow;
            border-radius:100%;
        }
        .box{
            float:left;
            width: 500px;
            height: 500px;
            border-radius:100%;
            color: #fff;
            position:absolute;
            top:-27px;
            left:-27px;
            pointer-events:none;
        }
        .box .ball{
            border-radius: 100%;
            width: 100px;
            height: 100px;
            /*font:bold 12px/20px Arial;*/
            text-align: center;
            background: blue;
            margin: 0 auto;
            pointer-events:auto;
        }
        .box .ball{
            animation:spin 20s infinite linear;
            transform-origin: 50% 250px;
        }
        .box .ball .inner{
            animation:inherit;
            animation-direction:reverse;
        }
        .box .ball .text{
            width:100px;
            height:100px;
            /*background:rgba(255,255,255,0.5);*/
        }
        .box .ball .inner span{
            display:block;
        }

        .box-1{
            transform:rotate(25deg);
        }
        .box-1 .text{
            transform:rotate(-25deg);
        }
        .box-2{
            transform:rotate(145deg);
        }
        .box-2 .text{
            transform:rotate(-145deg);
        }
        .box-3{
            transform:rotate(265deg);
        }
        .box-3 .text{
            transform:rotate(-265deg);
        }
        @keyframes spin{
            to{transform: rotate(1turn);}
        }

        .poinitEvent{
            pointer-events:none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box box-1">
        <div class="ball">
            <div class="inner"><div class="text"><img src="images/quan1.png" alt=""><span>ball-1</span></div></div>
        </div>
    </div>
    <div class="box box-2">
        <div class="ball">
            <div class="inner"><div class="text"><img src="images/quan1.png" alt=""><span>ball-2</span></div></div>
        </div>
    </div>
    <div class="box box-3">
        <div class="ball">
            <div class="inner"><div class="text"><img src="images/quan1.png" alt=""><br><span>ball-3</span></div></div>
        </div>
    </div>
</div>


<a href="javascript:;" onclick="alert(1)" class="poinitEvent">click Me</a>

<script>
    ballBindEvent();
    function ballBindEvent(){
        var ballAll=document.querySelectorAll(".ball");
        ballAll=Array.prototype.slice.apply(ballAll);//將僞數組=>數組  僞數組沒有forEach方法
        ballAll.forEach(function(item,Array,index){
            item.addEventListener("mouseover",function(){
                pausedAndrun("paused");
            })
            item.addEventListener("mouseout",function(){
                pausedAndrun("running");
            })
        })
    }
    function pausedAndrun(state){
        var ballAll=document.querySelectorAll(".ball");
        for(var i=0;i<ballAll.length;i++){
            ballAll[i].style.animationPlayState=state;
        }
    }
</script>
</body>
</html>

demo3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        body{ margin: 50px; text-align: center;}
        h3{clear: both; overflow: hidden; text-align: left;}
        .container{
            position:relative;
            width: 446px;
            height: 446px;
            background:yellow;
            background-size:contain;
            border-radius:100%;
        }
        .box{
            float:left;
            width: 500px;
            height: 500px;
            border-radius:100%;
            color: #fff;
            position:absolute;
            top:-27px;
            left:-27px;
            pointer-events:none;
        }
        .box .ball{
            border-radius: 100%;
            width: 100px;
            height: 100px;
            text-align: center;
            background: blue;
            margin: 0 auto;
            pointer-events:auto;
        }
        .box .ball{
            animation:spin 20s infinite linear;
            transform-origin: 50% 250px;
        }
        .box .ball .text{
            width:100px;
            height:100px;
        }
        .box .ball span{
            display:block;
        }

        .box-1{
            transform:rotate(25deg);
        }
        .box-1 .text{
            transform:rotate(-25deg);
        }
        .box-2{
            transform:rotate(145deg);
        }
        .box-2 .text{
            transform:rotate(-145deg);
        }
        .box-3{
            transform:rotate(265deg);
        }
        .box-3 .text{
            transform:rotate(-265deg);
        }
        @keyframes spin{
            from{
                transform: translate(50%, 250px)
                rotate(0turn)
                translate(-50%, -250px)
                translate(50%,50%)
                rotate(1turn)
                translate(-50%,-50%)
            }
            to{
                transform: translate(50%, 250px)
                rotate(1turn)
                translate(-50%, -250px)
                translate(50%,50%)
                rotate(0turn)
                translate(-50%,-50%)
            }
        }

        .poinitEvent{
            pointer-events:none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box box-1">
        <div class="ball">
            <div class="text"><img src="images/quan1.png" alt=""><span>ball-1</span></div>
        </div>
    </div>
    <div class="box box-2">
        <div class="ball">
            <div class="text"><img src="images/quan1.png" alt=""><span>ball-2</span></div>
        </div>
    </div>
    <div class="box box-3">
        <div class="ball">
            <div class="text"><img src="images/quan1.png" alt=""><br><span>ball-3</span></div>
        </div>
    </div>
</div>


<a href="javascript:;" onclick="alert(1)" class="poinitEvent">click Me</a>

<script>
    ballBindEvent();
    function ballBindEvent(){
        var ballAll=document.querySelectorAll(".ball");
        ballAll=Array.prototype.slice.apply(ballAll);//將僞數組=>數組  僞數組沒有forEach方法
        ballAll.forEach(function(item,Array,index){
            item.addEventListener("mouseover",function(){
                pausedAndrun("paused");
            })
            item.addEventListener("mouseout",function(){
                pausedAndrun("running");
            })
        })
    }
    function pausedAndrun(state){
        var ballAll=document.querySelectorAll(".ball");
        for(var i=0;i<ballAll.length;i++){
            ballAll[i].style.animationPlayState=state;
        }
    }
</script>
</body>
</html>

文章用到的圖片：

quan1:

用到的css3新特性：

pointer-events : auto(啓用事件，默認值)|none(禁用事件)

三、總結

demo1:自身繞圓旋轉,內容不轉
demo2:在demo1的基礎上，新增二個圓圈繞着大圓轉
demo3:在demo2的基礎上做了優化

參考地址：http://caibaojian.com/css3-animate-spin.html

使用css3構建一個摩天輪旋轉

認知提升的方法

C#開源的兩款功能強大的錄屏神器

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

前端 Vue yarn.lock文件：詳解和使用指南

JavaScript的原型與原型鏈

node跨域轉發（徹底實現前後端分離）

使用css3構建一個摩天輪旋轉

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結