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

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

代码语言：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 ;

}

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