css3 實現運動動畫 圓與橢圓

圓：

html

<div class="demo4"><div></div></div>

 

css

.demo4{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
            box-sizing: border-box;
        }
        .demo4 div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: blue;
            transform-origin:100px 100px;// 移動元素渲染的圓心位置，因為是位置父元素旋轉，父元素的圓心是100px 100px
            animation: bb 2s infinite linear;
        }
        @keyframes bb{
            to{
                transform: rotate(1turn);
            }
        }

橢圓運動：

原理就是在圓運動的基礎上給父元素添加一個y軸上的上下運動

css

.demo4{
            width: 200px;
            height: 300px;
            margin: 100px auto;
            /*border:1px solid red;*/
            border-radius: 50%;
            position: relative;
            box-sizing: border-box;
            animation: cc 1s infinite alternate ease-in-out;//父元素y軸上添加一個循環 往復的上下運動，最終效果看着像是子元素在做橢圓運動
        }
        .demo4 div{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: blue;
            transform-origin:100px 100px;
            animation: bb 2s infinite linear;
        }
        @keyframes cc{
            to{
                transform: translateY(50px);
            }
        }
        @keyframes bb{
            to{
                transform: rotate(1turn);
            }
        }

鍾擺運動：

這個比較簡單，就是把元素的運動參考點移動到頂部中心，就是設置 transform-origin:top center;

demo:

html

<div class="demo3"></div>

css

.demo3{
            width: 20px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
            transform-origin: top center;
            transform:rotate(45deg);
            animation: aa .5s infinite alternate ease-in-out;//循環往復的運動，實現運動寧效果的連貫性

        }
        @keyframes aa{
            to{
                transform:rotate(-45deg);
            }
        }