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

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

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