奔跑的北极熊

效果图
奔跑的北极熊_第1张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>奔跑的小熊title>
    <style>
        body {
            position: relative;
            background-color: #ccc;
        }
        
        .bg1 {
            position: absolute;
            top: 380px;
            width: 100%;
            height: 336px;
            z-index: 1;
            background: url(./media/bg1.png) no-repeat;
            animation: moveBody 20s linear forwards infinite;
        }
        
        .bg2 {
            position: absolute;
            top: 210px;
            width: 100%;
            height: 400px;
            background: url(./media/bg2.png) no-repeat;
            animation: moveBody 20s linear forwards infinite;
        }
        
        .bear {
            position: absolute;
            height: 100px;
            width: 200px;
            margin-top: 600px;
            z-index: 2;
            background: url(./media/bear.png) no-repeat;
            animation: runningBear 0.5s steps(8) infinite, moveDIV 3s linear forwards;
        }
        
        @keyframes moveBody {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: -1600px 0px;
            }
        }
        
        @keyframes moveDIV {
            0% {
                left: 0px;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        @keyframes runningBear {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: -1600px 0px;
            }
        }
    style>
head>

<body>
    <div class="bg1">div>
    <div class="bg2">div>
    <div class="bear">div>
body>

html>

背景2
背景1
北极熊

你可能感兴趣的:(笔记,css,css3,html,前端)