CSS實現(xiàn)奔跑的北極熊動畫

發(fā)布時間：2023-05-10 14:15:48 作者：佚名

我要評論

這篇文章主要介紹了CSS實現(xiàn)奔跑的北極熊動畫,css動畫還是很有趣的，本文就用動畫實現(xiàn)一個奔跑的北極熊,感興趣的小伙伴一起來看看吧,需要的朋友可以參考下

最終效果

請?zhí)砑訄D片描述

實現(xiàn)思路

上面這個動畫效果細分有三個動畫，我們來分別說一下他們的實現(xiàn)效果！

雪山的移動

首先，我們需要將一個盒子采用固定定位定位到頁面底部，然后給這個盒子添加背景圖片雪山，并且圖片平鋪。準備好之后就開始寫動畫了，我們只需要向左移動背景圖片就行，然后動畫不斷循環(huán)即可！

在這里插入圖片描述

動畫代碼如下：

/* 定義山向后移動動畫 */
 @keyframes mountain{
      0%{
          background-position: 0;
      }
      100%{
          background-position: -3840px 0;
      }
  }

北極熊的移動

這個動畫只需要執(zhí)行一次，將北極熊移動到屏幕中央，之前關于將盒子移動到屏幕中間我們已經(jīng)寫過一些方法了，直接看代碼：

/* 定義小熊奔跑到屏幕中央動畫 */
  @keyframes move{
      0%{
          left: 0;
      }
      100%{
          left: 50%;
          transform: translateX(-50%);
      }
  }

北極熊的奔跑

這個動畫是本次動畫的重點，其實也比較簡單，我們只需要準備一張北極熊奔跑的系列圖片。

在這里插入圖片描述

這張圖片總長為1600px,我們只需要準備一個200px的盒子，讓這張圖片作為盒子的背景圖片，然后向后移動圖片位置即可實現(xiàn)北極熊的奔跑。然后動畫的速度曲線我們用steps(8)步長,200px*8正好1600px,然后讓動畫無限循環(huán)。

在這里插入圖片描述

動畫代碼如下：

/* 定義小熊奔跑動畫 */
  @keyframes run{
      0%{
          background-position: 0;
      }
      100%{
          background-position: -1600px 0;
      }
  }

源代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奔跑的小熊</title>
    <style>
        html,body{
            height: 99%;
            background-color: #3b3d4b;
        }
        .box{
            position: fixed;
            bottom: 0;
            width: 100%;
            height:336px;
            overflow: hidden;
            background: url(img/20210503122606771.png) repeat;
            animation: mountain 20s linear infinite;
        }
        .bear{
            position: absolute;
            width:200px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: url(img/20210503123039702.png) no-repeat;
            animation: run 1s steps(8) infinite,move 3s linear 1 forwards;
        }

        /* 定義小熊奔跑動畫 */
        @keyframes run{
            0%{
                background-position: 0;
            }
            100%{
                background-position: -1600px 0;
            }
        }
        /* 定義小熊奔跑到屏幕中央動畫 */
        @keyframes move{
            0%{
                left: 0;
            }
            100%{
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* 定義山向后移動動畫 */
        @keyframes mountain{
            0%{
                background-position: 0;
            }
            100%{
                background-position: -3840px 0;
            }
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="bear"></div>
    </div>  
</body>
</html>

到此這篇關于CSS實現(xiàn)奔跑的北極熊動畫的文章就介紹到這了,更多相關CSS北極熊動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！