css布局实现一个卡通可爱恐龙走路动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局实现一个卡通可爱恐龙走路动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <style>
       html {

    box-sizing: border-box ;
    --gray : #f1f1f1 ;
    --lightGray : #c2c2c2 ;
    --green : #466b21 ;
    --lightGreen : #669933 ;
    --shadow : #2a2d2733 ;
    --darkGreen : #2f4717 ;
    --black : #010101 ;
    --duration-head: .64s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    --duration-body: .18s cubic-bezier(0.6, -0.28, 0.74, 0.05);
    --duration-leg: .64s linear;
    --duration-tail: .36s cubic-bezier(0.54, 0.03, 0, 0.96);
    --duration-shadow: .36s cubic-bezier(0.54, 0.03, 0, 0.96);

}

html *,
html *::before,
html *::after {

    box-sizing: inherit ;

}

body {

    margin: 0 ;
    height: 100vh ;
    display: flex  ;
    overflow: hidden ;
    align-items: center  ;
    justify-content: center ;
    background-color: var(--gray) ;

}

body * {

    position: absolute ;

}

body *::before,
body *::after {

    content: "" ;
    position: absolute ;

}

.chameleon {

    width: 14em ;
    height: 12em ;

}

.chameleon::after {

    top: 89% ;
    width: 10em ;
    left: 3% ;
    height: 0.5em ;
    background-color: var(--lightGray) ;
    animation: shadow var(--duration-shadow) infinite ;
}

.chameleon__head {

    top: 19% ;
    left: 50% ;
    width: 6em ;
    height: 6em ;
    z-index: 100 ;
    border-radius: 50%;
    animation: head var(--duration-head) infinite ;

}

.chameleon__face {

    width: 100% ;
    height: 100% ;
    border-radius: inherit ;
    background-color: var(--green);

}

.chameleon::before,
.chameleon__face::after {
    
    border-radius: 50% ;
    animation: var(--duration-head) infinite ;
    
}

.chameleon::before {

    width: 4em ;
    height: 4em ;
    z-index: -100 ;
    animation-name: eye-b ;
    background-color: var(--lightGreen) ;

}

.chameleon__face::after {
    
    top: 2% ;
    width: 4.5em ;
    height: 4.5em ;
    animation-name: eye-f ;
    background-repeat: no-repeat;

    background-image : 
    radial-gradient(.5em .5em at center center , var(--gray) 37%, transparent 51%) ,
    radial-gradient(1.8em 1.8em at center center , var(--black) 47%, transparent 51%) ,
    radial-gradient(4em 4em at center center , var(--lightGreen) 49%, transparent 50%) ;

    background-size :
    1.5em 1.5em ,
    3em 3em ,
    4.5em 4.5em ;

    background-position : 
    -9% 34% ,
    -53% 24% ,
    center center ;

}

.chameleon__body { 

    top: 18%;
    left: 9.1%;
    width: 10em;
    height: 8em;
    animation: shake var(--duration-body) infinite alternate;

}

.chameleon__tummy {

    top: 54% ;
    left: 31% ;
    width: 6em ;
    height: 3.3em ;
    border-radius: 50% ;
    background-color: var(--green) ;

}

.chameleon__tummy::before {

    top: -1% ;
    left: -5% ;
    width: 2em ;
    height: 2.6em ;
    transform: rotate(13deg) ;
    background-color: var(--green) ;
    box-shadow: 1.4em -1.5em 0 0 var(--green), 2.7em -2.7em 0 0 var(--green) ;

}

.chameleon__tummy::after{

    top: 2.4% ;
    right: 59% ;
    z-index: -50 ;
    width: 9.6em ;
    height: 4.3em ;
    transform: rotate(-12deg) ;
    border-radius: 0 0 50% 50% ;
    border: 0.3125em solid var(--gray) ;

}

.chameleon__tail {

    top: -1% ;
    right: 59% ;
    z-index: -50 ;
    width: 9.6em ;
    height: 4.2em ;
    overflow: hidden ;
    transform: rotate(-12deg) ;
    border-radius: 0 0 50% 50% ;
    
}

.chameleon__tail::before {
    
    left: 0 ;
    top: 47.4% ;
    width: 100% ;
    height: 77% ;
    background-color: var(--green) ;
    
    
}

.chameleon__tail::after {
    
    width: 89% ;
    height: 83% ;
    border-radius: 50% ;
    background-color: var(--gray) ;
    transform: rotate(-18deg) translate3d(-12%, 0% ,0) ;
    animation: tail var(--duration-tail) infinite ;
    
}

.chameleon__leg-front {

    top: 66% ;
    left: 60% ;
    width: 4em ;
    height: 3em ;
    z-index: -5 ;

}

.chameleon__leg-front::before,
.chameleon__leg-front::after {

    width: 1.2em ;
    height: 4em ;
    background-repeat: no-repeat ;
    animation: var(--duration-leg) infinite ;

}

.chameleon__leg-front::before {

    animation-name: leg-2 ;

}

.chameleon__leg-front::after {

    animation-name: leg-1 ;

}

.chameleon__leg-back {

    top: 66% ;
    left: 40% ;
    z-index: -5 ;
    height: 3em ;
    width: 2.5em ;

}

.chameleon__leg-back::before,
.chameleon__leg-back::after {
    
    width: 1.2em ;
    height: 2.2em ;
    animation: var(--duration-leg) infinite ;

}

.chameleon__leg-back::before {
    
    animation-name: leg-4 ;
    background-color: var(--darkGreen) ;

}

.chameleon__leg-back::after {

    animation-name: leg-3 ;
    background-color: var(--green) ;

}

@keyframes head {


    0%, 100% {

        width: 5.85em ;
        box-shadow: unset ;
        transform: translate3d(21% , 1%, 0) ;

    }
 
    5%{

        transform: translate3d(27% , 5%, 0) ;

    }

    10%{
        
        transform: translate3d(14% , 2%, 0) ;
        box-shadow: -6px 6px 2px -6px var(--shadow) ;

    }

    17%{

        width: 5.9em ;
        transform: translate3d(7% , -1%, 0) ;
        box-shadow: -12px 11px 2px -9px var(--shadow) ;
        
    }

    25%{

        width: 5.9em ;
        transform: translate3d(2% , -2%, 0) ;
        box-shadow: -11px 13px 2px -9px var(--shadow) ;
        
    }

    30%, 40%{

        width: 5.9em ;
        transform: translate3d(0 , -2%, 0) ;
        box-shadow: -11px 13px 2px -9px var(--shadow) ;

    }

    50%{

        width: 5.9em ;
        transform: translate3d(6% , 0%, 0) ;
        box-shadow: -11px 13px 2px -9px var(--shadow) ;

    }
   
    60%{

        width: 5.9em ;
        box-shadow: unset ;
        transform: translate3d(15% , -1%, 0) ;

    }
  
    75%{

        width: 5.9em ;
        box-shadow: unset ;
        transform: translate3d(14% , -3%, 0) ;

    }

    80%, 90%{

        width: 5.9em ;
        box-shadow: unset ;
        transform: translate3d(14% , -2%, 0) ;

    }

}

@keyframes eye-b {


    0%, 100%{

        transform: translate3d(241% , 50%, 0) ;

    }
  
    5%{
        
        transform: translate3d(277% , 86%, 0) ;

    }
 
    10%{

        transform: translate3d(260% , 84%, 0) ;

    }

    17%{

        transform: translate3d(242% , 64%, 0) ;

    }

    25%{

        transform: translate3d(234% , 52%, 0) ;

    }

    30%{

        transform: translate3d(231% , 45%, 0) ;
        
    }

    40%{

        transform: translate3d(233% , 44%, 0) ;

    }

    50%{

        transform: translate3d(238% , 48%, 0) ;

    }
 
    60%{

        transform: translate3d(205% , 56%, 0) ;

    }

    75%{

        transform: translate3d(215% , 52%, 0) ;

    } 
 
    80%{
        
        transform: translate3d(189% , 48%, 0) ;

    } 
 
    85%{

        transform: translate3d(181% , 46%, 0) ;

    } 

    90%{

        transform: translate3d(198% , 53%, 0) ;

    } 
}

@keyframes eye-f {

    0%, 100%{

        background-position : 
        40% 22% ,
        55% 23% ,
        center center ;
        transform: translate3d(27% , -18%, 0) ;

    }
 
    5%{

        background-position : 
        16% 38% ,
        19% 41% ,
        center center ;
        transform: translate3d(2% , -13%, 0) ;

    }

    10%{

        background-position : 
        8% 38% ,
        6% 36% ,
        center center ;
        transform: translate3d(2% , -13%, 0) ;

    }

    17%{

        background-position : 
        -1% 38% ,
        -14% 40% ,
        center center ;
        transform: translate3d(2% , -13%, 0) ; 

    }
 
    25%{

        background-position : 
        -4% 36% ,
        -17% 36% ,
        center center ;
        transform: translate3d(-8% , -3%, 0) ;
        
    }

    30%, 40%{

        background-position : 
        -5% 36% ,
        -19% 32% ,
        center center ;
        transform: translate3d(-14% , 4%, 0) ;
        
    }

    50%{

        background-position : 
        -5% 37% ,
        -21% 32% ,
        center center ;
        transform: translate3d(-18% , 6%, 0) ;

    }

    60%{
        
        background-position : 
        45% 21% ,
        74% 14% ,
        center center ;
        transform: translate3d(1% , -13%, 0) ;

    }

    75%{

        background-position : 
        59% 11% ,
        93% 0% ,
        center center ;
        transform: translate3d(12% , -14%, 0) ;

    } 
 
    80%.........完整代码请登录后点击上方下载按钮下载查看