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

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

代码语言：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);
        -.........完整代码请登录后点击上方下载按钮下载查看