CSS實(shí)現(xiàn)奔跑的北極熊動(dòng)畫

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

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

最終效果

請(qǐng)?zhí)砑訄D片描述

實(shí)現(xiàn)思路

上面這個(gè)動(dòng)畫效果細(xì)分有三個(gè)動(dòng)畫，我們來分別說一下他們的實(shí)現(xiàn)效果！

雪山的移動(dòng)

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

在這里插入圖片描述

動(dòng)畫代碼如下：

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

北極熊的移動(dòng)

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

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

北極熊的奔跑

這個(gè)動(dòng)畫是本次動(dòng)畫的重點(diǎn)，其實(shí)也比較簡(jiǎn)單，我們只需要準(zhǔn)備一張北極熊奔跑的系列圖片。

在這里插入圖片描述

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

在這里插入圖片描述

動(dòng)畫代碼如下：

/* 定義小熊奔跑動(dòng)畫 */
  @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;
        }

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

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

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

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