CSS3動畫實踐——簡易牛頓擺_ZenDei技術網路在線

CSS3動畫實踐——簡易牛頓擺

-Advertisement-

實現起來並不複雜，只需對最左和最右的小球進行關鍵幀動畫處理，同時註意應該將繩子與小球作為一個整體，以左邊小球為例： .left-ball.ball-wrapper { transform-origin: center top; animation: left-ball-swing 4s 0s inf ...

最近在練習CSS3的關鍵幀動畫（keyframes），於是做了一個簡單的牛頓擺（聽名字可能陌生，但你一定見過它）:



先上代碼(老版本IE可能存在相容性問題)：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .main-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #d7c8d0;
        }

        .swing-container {
            width: 500px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }

        .roof {
            width: 100%;
            height: 20px;
            background-color: #18619b;
        }

        .ball-wrapper {
            flex-basis: 100px;
            height: 380px;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .ball {
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 90px;
            border-radius: 50px;
            background-color: #edcb66;
        }

        .rope {
            background: black;
            width: 2px;
            height: 280px;
        }

        .left-ball.ball-wrapper {
            transform-origin: center top;
            animation: left-ball-swing 4s 0s infinite normal;
        }

        .right-ball.ball-wrapper {
            transform-origin: center top;
            animation: right-ball-swing 4s 2s infinite normal;
        }

        @keyframes left-ball-swing {
            0% {
                transform: rotate(0deg);
                animation-timing-function: ease-out；
            }
            25% {
                transform: rotate(90deg);
                animation-timing-function: ease-in;
            }
            50% {
                transform: rotate(0deg)
            }
            100% {}
        }

        @keyframes right-ball-swing {
            0% {
                transform: rotate(0deg);
                animation-timing-function: ease-out;
            }
            25% {
                transform: rotate(-90deg);
                animation-timing-function: ease-in;
            }
            50% {
                transform: rotate(0deg)
            }
            100% {}
        }
    </style>
</head>

<body>
    <div class="main-container">
        <div class="swing-container">
            <div class="roof">
            </div>
            <div class="left-ball ball-wrapper">
                <div class="rope"></div>
                <div class="ball">快</div>
            </div>
            <div class="ball-wrapper">
                <div class="rope"></div>
                <div class="ball">點</div>
            </div>
            <div class="ball-wrapper">
                <div class="rope"></div>
                <div class="ball">去</div>
            </div>
            <div class="ball-wrapper">
                <div class="rope"></div>
                <div class="ball">看</div>
            </div>
            <div class="right-ball ball-wrapper">
                <div class="rope"></div>
                <div class="ball">書</div>
            </div>
        </div>
    </div>
</body>
</html>

實現起來並不複雜，只需對最左和最右的小球進行關鍵幀動畫處理，同時註意應該將繩子與小球作為一個整體，以左邊小球為例：

.left-ball.ball-wrapper {
            transform-origin: center top;
            animation: left-ball-swing 4s 0s infinite normal;
        }
        
 @keyframes left-ball-swing {
            0% {
                transform: rotate(0deg);
                animation-timing-function: ease-out；
            }
            25% {
                transform: rotate(90deg);
                animation-timing-function: ease-in;
            }
            50% {
                transform: rotate(0deg)
            }
            100% {}
        }

以繩子的起點為圓心，擺動共4秒：　　0%--25%(第一秒)：順時針旋轉90度，速度為ease-out(逐漸變緩,因為動能轉化為勢能到了最高點速度為0) 　　25%--50%（第二秒）：返回到0度，即逆時針旋轉了90度，速度為ease-in，勢能變為動能　　50%--100%（後兩秒）：不做變化（這兩秒是右邊小球在擺動）
That'it，最後來看效果圖：

感謝閱讀，o(*￣▽￣*)o

原創文章，轉載請註明出處。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Android Studio 3.0+ Record Espresso Test 自動化測試

準備工作 1.將android studio 版本升級到3.0+2.百度下載夜神模擬器夜神模擬器的基本設置 PS：以上就是夜神模擬器的基本設置 Android Studio 連接夜神模擬器開始錄製自動測試代碼 PS：操作模擬器 -> Record Your Test 彈框將自動生成你的行為代碼 ...
如何用charles進行https抓包

版權聲明：本文為xing_star原創文章，轉載請註明出處！本文同步自http://javaexception.com/archives/138 如何用charles進行https抓包晚上在家鼓搗技術的時候，發現家裡mac的charles無法抓手機上app的https協議請求，已經忍了很久了，就 ...
ES6-WeakSet數組結構

WeakSet 也會去重總結： 1.成員都是對象； 2.成員都是弱引用，可以被垃圾回收機制回收，可以用來保存 DOM 節點，不容易造成記憶體泄漏； 3.不能遍歷，方法有 add、delete、has。 ...
ES6-Symbol的用法，symbol在對象中的應用，改變值

ES6-Symbol的用法，symbol在對象中的應用，改變值 ...
css實現水平/垂直居中效果

一、如果是已知寬高的元素做水平/垂直居中效果的話，可以直接用具體的數值指定定位佈局或偏移佈局，這個就不過多討論。這裡主要介紹在不知寬高或需要彈性佈局下的幾種實現方式。二、1.table表格法思路：顯示設置父元素為：table，子元素為：cell-table，vertical-align: cent ...
ES6-對象賦值，key值得構建，is()方法對比對象，assign()合併對象

ES6-對象賦值，key值得構建，is()方法對比對象，assign()合併對象 ...
JavaScript篇（一）二叉樹的插入 (附:可視化)

一、二叉樹概念二叉樹（binary tree）是一顆樹，其中每個節點都不能有多於兩個的兒子。位元組一面，第一道就是二叉樹的插入，在這裡其實是對於一個二叉查找樹的插入。使二叉樹成為二叉查找樹的性質是，對於樹中的每個節點X，它的左子樹中所有項的值小於X中的項目，而它的右子樹所有的項的值大於X中的項。 ...
ES6 -箭頭函數，對象的函數解構

ES6 -箭頭函數,javascript箭頭函數對象的函數解構 ...