<pre id="bxbrr"></pre>

      <span id="bxbrr"></span>
      <span id="bxbrr"></span>

      <span id="bxbrr"></span>

        經典案例推廣高端H5電商設計公司聯系報價
        QQ聯系
        微信聯系
        手機聯系
        QQ聯系
        微信聯系
        手機聯系

        CSS3 創建簡單的網頁動畫 – 實現彈跳球動

        發布時間:2019-08-14
        發布者:eidea
        瀏覽次數:4636
        ,

        基礎準備

        對于這個實現,我們需要一個簡單的 div ,并且樣式類名為 ball :

        HTML 代碼:

        <div class="ball"></div>

        我們將使用 Flexbox 布局,把球放到頁面中間,尺寸為 100px * 100px,背景色為橘黃色。

        CSS 代碼:

        body {
        display: flex; /* 使用Flex布局 */
        justify-content: center; /* 水平居中 */
        }
        .ball {
        width: 100px;
        height: 100px;
        border-radius: 50%; /* 把正方形變成圓形*/
        background-color: #FF5722; /* 設置顏色為橙色*/
        }

        創建 Keyframe(關鍵幀)

        Keyframe(關鍵幀) 用于 CSS 動畫,以便我們完全控制動畫。創建 Keyframe(關鍵幀) 的樣式非常簡單。我們使用關鍵字 @keyframes,在后面跟動畫名稱:

        CSS 代碼:

        @keyframes nameOfAnimation {
        /* 代碼 */
        }

        在這個示例中,我們把 keyframe(關鍵幀) 取名為 bounce。在 Keyframe 中,用 from 和 to 關鍵字來指定動畫開始點和結尾點的 CSS 樣式。

        CSS 代碼:

        @keyframes bounce {
        from { /* 開始 */ }
        to { /* 結束 */ }
        }

        很簡單是不是? 最后一步,我們可以添加我們的開始點和結尾點的 CSS 樣式。為了創建反彈效果,我們將只是改變球的位置。transform 允許我們修改給定元素的坐標。以下是最終的 keyframe(關鍵幀) :

        CSS 代碼:

        @keyframes bounce {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(0, 200px, 0); }
        }

        我們使用 transform 讓球沿著三維軸平移,translate3D 函數需要 3 個輸入參數,即 (x, y, z) 。 因為我們想讓球上下跳動,我們只需要沿著 y 軸進行平移。因此,動畫結束點(即 to 中樣式)的 y 值變成了 200px 。

        運行 Keyframe(關鍵幀)

        現在 @keyframe 已經創建了,是時候讓它運行起來了!回到 .ball{} css 并添加以下行代碼:

        CSS 代碼:

        .ball {
        /* ... */
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        }

        解釋一下這三行代碼:

        告訴 ball 元素使用我們的 keyframe(關鍵幀) 規則反彈。 設置完成動畫的時間長度為 .5 秒。

        完成后,動畫反方向執行(反轉)。

        無限次地運行動畫。

        真棒,到目前為止。 離我們想要的已經很近了,但還不完美:

        它看起來不像一個彈跳的球。那是因為我們沒有為動畫設置速度曲線,默認會被設置為 ease。意思是動畫的速度剛開始慢,中間變快,快結束的時候又變慢。不幸的是,這不是一個彈跳球的理想選擇。幸運的是,我們可以使用 Math 來定制這個 速度曲線!
        進入太多的細節,你可以使用 bezier(貝塞爾曲線) 來指定自定義動畫時間。以下是附加的代碼:

        CSS 代碼:

        .ball {
        /* ... */
        animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
        }

        當然這是用 CSS Animations(動畫) 和 Keyframes(關鍵幀) 創建的最簡單的動畫效果.

        網站案例欣賞

        火王廚電

        H5響應式網站、品牌營銷網站

        韋格斯楊

        室內設計公司企業官網設計

        逸林酒店

        響應式企業官網

        看一 级 黄 色 片,靠免费视频观看,靠免费视频在线观看