div+css实现可怜的哈巴狗走路动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现可怜的哈巴狗走路动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>

@keyframes dog-head {
    0% {
        transform: rotate(80deg);
        -webkit-transform: rotate(80deg);
        -moz-transform: rotate(80deg);
        -o-transform: rotate(80deg);
        -ms-transform: rotate(80deg)
    }

    20% {
        transform: rotate(80deg);
        -webkit-transform: rotate(80deg);
        -moz-transform: rotate(80deg);
        -o-transform: rotate(80deg);
        -ms-transform: rotate(80deg)
    }

    60% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg)
    }

    100% {
        transform: rotate(80deg);
        -webkit-transform: rotate(80deg);
        -moz-transform: rotate(80deg);
        -o-transform: rotate(80deg);
        -ms-transform: rotate(80deg)
    }
}

@keyframes paw {
    0% {
        transform: rotate(-10deg) translate(0,-10px);
        -webkit-transform: rotate(-10deg) translate(0,-10px);
        -moz-transform: rotate(-10deg) translate(0,-10px);
        -o-transform: rotate(-10deg) translate(0,-10px);
        -ms-transform: rotate(-10deg) translate(0,-10px)
    }

    20% {
        transform: rotate(20deg) translate(0,0);
        -webkit-transform: rotate(20deg) translate(0,0);
        -moz-transform: rotate(20deg) translate(0,0);
        -o-transform: rotate(20deg) translate(0,0);
        -ms-transform: rotate(20deg) translate(0,0)
    }

    100% {
        transform: rotate(-10deg) translate(0,-10px);
        -webkit-transform: rotate(-10deg) translate(0,-10px);
        -moz-transform: rotate(-10deg) translate(0,-10px);
        -o-transform: rotate(-10deg) translate(0,-10px);
        -ms-transform: rotate(-10deg) translate(0,-10px)
    }
}

@keyframes shadow {
    0% {
        transform: scale(1) rotate(-5deg);
        -webkit-transform: scale(1) rotate(-5deg);
        -moz-transform: scale(1) rotate(-5deg);
        -o-transform: scale(1) rotate(-5deg);
        -ms-transform: scale(1) rotate(-5deg)
    }

    50% {
        transform: scale(1.04) rotate(-5deg);
        -webkit-transform: scale(1.04) rotate(-5deg);
        -moz-transform: scale(1.04) rotate(-5deg);
        -o-transform: scale(1.04) rotate(-5deg);
        -ms-transform: scale(1.04) rotate(-5deg)
    }

    100% {
        transform: scale(1) rotate(-5deg);
        -webkit-transform: scale(1) rotate(-5deg);
        -moz-transform: scale(1) rotate(-5deg);
        -o-transform: scale(1) rotate(-5deg);
        -ms-transform: scale(1) rotate(-5deg)
    }
}

@keyframes run {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1)
    }

    20% {
        transform: scale(1.02) translate(0,-3px);
        -webkit-transform: scale(1.02) translate(0,-3px);
        -moz-transform: scale(1.02) translate(0,-3px);
        -o-transform: scale(1.02) translate(0,-3px);
        -ms-transform: scale(1.02) translate(0,-3px)
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1)
    }
}

@keyframes eye {
    0% {
        transform: translate(0,0px);
        -webkit-transform: translate(0,0px);
        -moz-transform: translate(0,0px);
        -o-transform: translate(0,0px);
        -ms-transform: translate(0,0px)
    }

    38% {
        transform: translate(0,0px);
        -webkit-transform: translate(0,0px);
        -moz-transform: translate(0,0px);
        -o-transform: translate(0,0px);
        -ms-transform: translate(0,0px)
    }

    40% {
        transform: translate(-3px,5px);
        -webkit-transform: translate(-3px,5px);
        -moz-transform: translate(-3px,5px);
        -o-transform: translate(-3px,5px);
        -ms-transform: translate(-3px,5px)
    }

    45% {
        transform: translate(6px,9px);
        -webkit-transform: translate(6px,9px);
        -moz-transform: translate(6px,9px);
        -o-transform: translate(6px,9px);
        -ms-transform: translate(6px,9px)
    }

    92% {
        transform: translate(6px,9px);
        -webkit-transform: translate(6px,9px);
        -moz-transform: translate(6px,9px);
        -o-transform: translate(6px,9px);
        -ms-transform: translate(6px,9px)
    }

    95% {
        transform: translate(-3px,5px);
        -webkit-transform: translate(-3px,5px);
        -moz-transform: translate(-3px,5px);
        -o-transform: translate(-3px,5px);
        -ms-transform: translate(-3px,5px)
    }

    100% {
        transform: translate(0,0px);
        -webkit-transform: translate(0,0px);
        -moz-transform: translate(0,0px);
        -o-transform: translate(0,0px);
        -ms-transform: translate(0,0px)
    }
}

@keyframes medal {
    0% {
        bottom: 0;
        left: 50px
    }

    60% {
        bottom: 10px;
        left: 55px
    }

    100% {
        bottom: 0;
        left: 50px
    }
}

body {
    background: #38cd9f
}

.doge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%)
}

.doge__trunk {
    width: 154px;
    height: 120px;
    border-radius: 47%;
    background: #fef9e8;
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    z-index: 5;
    animation: run .4s infinite .2s cubic-bezier(0.4,0.34,0.16,0.79)
}

.doge__tail {
    position: absolute;
    width: 30px;
    height: 28px;
    background: #fef9e8;
    right: -10px;
    top: 13px;
    border-radius: 50%;
    animation: run .4s infinite .21s cubic-bezier(0.4,0.34,0.16,0.79)
}

.doge__collar {
    width: 60px;
    height: 77px;
    background: #f27779;
    top: 10px;
    left: 10px;
    position: absolute;
    border-radius: 50%;
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60.........完整代码请登录后点击上方下载按钮下载查看