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(--d.........完整代码请登录后点击上方下载按钮下载查看