无div纯css实现一个脾气暴躁的老婴儿动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：无div纯css实现一个脾气暴躁的老婴儿动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html {

    --pink: #fbae96 ;
    --gray: #e1e8ed ;
    --brown: #8a491c ;
    --cream: #feb99e ;
    --white: #ecf1f4 ;
    --bgMain: #fb9e64 ;
    --darkPink: #fea280 ;
    --darkBrown: #4a2920 ;
    --darkOrange:#fa7e45 ;
    --darkYellow: #e6bf9f ; 
    --lightYellow:#ffe6c7 ;
    --darkOrange-2: #a6653a ;
    --lightBrown-2: #9b6b4a ;
    --lightBrown-1: #c7854e ;

    --duration: 13.5s cubic-bezier(0, -0.15, 0.42, 1.11) ;

    box-sizing: border-box ;
    background-color: var(--bgMain) ;

}

@property --moveBody {

    syntax: '<number>';
    initial-value: 0;
    inherits: false;
    
}

@property --moveFace {

    syntax: '<number>';
    initial-value: 0;
    inherits: false;
    
}

@property --moveMustache-x {

    syntax: '<number>';
    initial-value: 0;
    inherits: false;

}

@property --moveMustache-y {

    syntax: '<number>';
    initial-value: 0;
    inherits: false;

}

@property --moveMustacheShadow-x {

    syntax: '<number>';
    initial-value: 0;
    inherits: false;

}

@property --moveMustacheShadow-y {

    syntax: '<number>';
    initial-value: .3;
    inherits: false;

}

@property --moveCircle-x {

    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
    
}

@property --moveWisp-x {

    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
    
}

@property --moveCircle-y {

    syntax: '<percentage>';
    initial-value: 24%;
    inherits: false;
    
}

@property --moveWisp-y {

    syntax: '<percentage>';
    initial-value: 92%;
    inherits: false;
    
}

@property --rotateMustache-z {

    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;

}

@property --rotateMustache-y {

    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;

}

@property --moveCheek {

    syntax: '<number>';
    initial-value: -3.7;
    inherits: false;
    
}

@property --blink {

    syntax: '<percentage>';
    initial-value: 72%;
    inherits: false;
    
}

@property --eyebrowLeftMove {

    syntax: '<number>';
    initial-value: -5.85;
    inherits: false;
    
}

@property --eyebrowRightMove {

    syntax: '<number>';
    initial-value: -5.85;
    inherits: false;
    
}

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

    box-sizing: inherit ;
    background-repeat: no-repeat ;
    -webkit-mask-repeat: no-repeat ;
}

body::before ,
body::after {

    content: " " ;
    position: absolute ;

}

@keyframes shake {
    
    5% , 5.5% {

        transform: translate3d( -.5em , 0 , 0 ) ;
    
    }

    8% , 8.5% {

        transform: translate3d( 1em , 0 , 0 ) ;

    }

    11% , 11.5% , 17% , 17.5% , 
    23% , 23.5% , 29% , 29.5%
    
    {

        transform: translate3d( -.98em , 0 , 0 ) ;

    }

    14%   , 14.5% , 20% , 
    20.5% , 26%   , 26.5%
    
    {

        transform: translate3d( .98em , 0 , 0 ) ;

    }

    32% , 32.5% {

        transform: translate3d( .4em , 0 , 0 ) ;

    }

    35% , 35.5% {

        transform: translate3d( -.4em , 0 , 0 ) ;

    }

    38% , 38.5% {

        transform: translate3d( .3em , 0 , 0 ) ;

    }

    0% , 4% , 41% , 100% {

        transform: translate3d( 0 , 0 , 0 ) ;

    }

}

@keyframes body {

    5% , 5.5% {

        --moveFace: -1.2 ;
        --moveBody: -.3 ;
        --moveMustache-x: 5 ;
        --rotateMustache-y: 0deg ;

    }

    8% , 8.5% {

        --moveFace: 2 ;
        --moveBody: .7 ;
        --moveMustache-x: 3.2 ;
        --rotateMustache-y: 0deg ;
    
    }

    11% , 11.5% , 17% , 17.5% , 
    23% , 23.5% , 29% , 29.5%
    
    {

        --moveFace: -3.3 ;
        --moveBody: -1.3 ;
        --moveMustache-x: 3.5 ;
        --rotateMustache-y: -10deg ;
    
    }

    14%   , 14.5% , 20% , 
    20.5% , 26%   , 26.5% 
    
    {

        --moveFace: 3.3 ;
        --moveBody: 1.3 ;
        --moveMustache-x: 3.5 ;
        --rotateMustache-y: 10deg ;
    }

    32% , 32.5% {

        --moveFace: 2 ;
        --moveBody: .5 ;
        --moveMustache-x: 5 ;
        --rotateMustache-y: 5deg ;
    }

    35% , 35.5% {

        --moveFace: -.6 ;
        --moveBody: -.1 ;
        --moveMustache-x: 7.2 ;
        --rotateMustache-y: 0deg ;
    
    }

    38% , 38.5% {

        --moveFace: .6 ;
        --moveBody: .1 ;
        --moveMustache-x: 7 ;
        --rotateMustache.........完整代码请登录后点击上方下载按钮下载查看