无div纯css实现一个脾气暴躁的老婴儿动画效果代码
代码语言：html
所属分类：动画
代码描述：无div纯css实现一个脾气暴躁的老婴儿动画效果代码
代码标签： 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-y: 0deg ;
}
0% , 4% , 41% , 100% {
--moveFace: 0 ;
--moveBody: 0 ;
--moveMustache-x: 0 ;
--rotateMustache-y: 0deg ;
}
}
@keyframes face {
1.5% , 3.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.3 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3;
}
2.5% , 4.5% , 13.5% , 40.5% , 42.5% ,
44.5% , 46.5% , 48.5% , 50.5% , 54.5%
{
--rotateMustache-z: 0deg ;
--moveMustache-y: .3 ;
--moveCheek : -3.5 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3;
}
5.5% , 6.5% , 8.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.35 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
7.5% , 9.5% , 15.5%{
--rotateMustache-z: 0deg ;
--moveMustache-y: .35 ;
--moveCheek : -3.5 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
10.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.55 ;
--moveCheek : -3.8 ;
--moveWisp-x: 43% ;
--moveCircle-x: 44% ;
--moveCircle-y: 25% ;
--moveWisp-y: 101% ;
--moveMustacheShadow-y: .35 ;
}
11.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .35 ;
--moveCheek : -3.5 ;
--moveWisp-x: 43% ;
--moveCircle-x: 44% ;
--moveCircle-y: 25% ;
--moveWisp-y: 101% ;
--moveMustacheShadow-y: .35 ;
}
12.5% , 14.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 59% ;
--moveCircle-x: 54% ;
--moveCircle-y: 28% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3;
}
17.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 42% ;
--moveCircle-x: 42% ;
--moveCircle-y: 24% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3 ;
}
18.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .2 ;
--moveCheek : -3.3 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
19.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.2 ;
--moveCheek : -3.6 ;
--moveWisp-x: 60% ;
--moveCircle-x: 53% ;
--moveCircle-y: 31% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .4 ;
}
20.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .3 ;
--moveCheek : -3.3 ;
--moveWisp-x: 60% ;
--moveCircle-x: 53% ;
--moveCircle-y: 31% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .4 ;
}
21.5% , 33.5% , 36.5% , 38.5% , 41.5% , 43.5% ,
45.5% , 47.5% , 49.5% , 51.5% , 56.5% , 62% ,
67.5% , 76% , 78.5% , 91% , 93.5% , 98%
{
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
22.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .3 ;
--moveCheek : -3.3 ;
--moveWisp-x: 47% ;
--moveCircle-x: 45% ;
--moveCircle-y: 28% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3 ;
}
23.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.4 ;
--moveWisp-x: 46% ;
--moveCircle-x: 45% ;
--moveCircle-y: 26% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3 ;
}
24.5% , 32.5% , 34.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .4 ;
--moveCheek : -3.3 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
25.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.4 ;
--moveCheek : -3.5 ;
--moveWisp-x: 52% ;
--moveCircle-x: 51% ;
--moveCircle-y: 25% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3 ;
}
26.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .4 ;
--moveCheek : -3.3;
--moveWisp-x: 54% ;
--moveCircle-x: 51% ;
--moveCircle-y: 25% ;
--moveWisp-y: 95% ;
--moveMustacheShadow-y: .1 ;
}
27.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.45 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
28.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .4 ;
--moveCheek : -3.3 ;
--moveWisp-x: 49% ;
--moveCircle-x: 47% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
29.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 47% ;
--moveCircle-x: 48% ;
--moveCircle-y: 26% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .3 ;
}
30.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .4 ;
--moveCheek : -3.5 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
31.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 53% ;
--moveCircle-x: 50% ;
--moveCircle-y: 29% ;
--moveWisp-y: 100% ;
--moveMustacheShadow-y: .35 ;
}
37.5% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .4 ;
--moveCheek : -3.45 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
65.7% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .1 ;
--moveCheek : -3.3 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
76.5% {
--rotateMustache-z: -6.5deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
77.5% {
--rotateMustache-z: 3deg ;
--moveMustache-y: -.5 ;
--moveCheek : -3.7 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
92% {
--rotateMustache-z: 0deg ;
--moveMustache-y: 0 ;
--moveCheek : -3.2 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
0% , .75% , 99% , 100% {
--rotateMustache-z: 0deg ;
--moveMustache-y: .3 ;
--moveCheek : -3.5 ;
--moveWisp-x: 50% ;
--moveCircle-x: 50% ;
--moveCircle-y: 24% ;
--moveWisp-y: 92% ;
--moveMustacheShadow-y: .3 ;
}
}
@keyframes eyes {
1% , 32% {
--eyebrowLeftMove: -5.85 ;
--eyebrowRightMove: -5.85 ;
}
1% {
--blink: 18% ;
}
1.5% {
--blink: 72% ;
}
2% {
--blink: 18% ;
}
2.5% , 14.5% {
--blink: 72% ;
}
15% {
--blink: 18% ;
}
15.5% {
--blink: 72% ;
}
35% , 51.5% {
--blink: 72% ;
--eyebrowLeftMove: -6 ;
--eyebrowRightMove: -6 ;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1) ;
}
52% {
--blink: 18%;
}
52.5% {
--blink: 72%;
}
60.5% , 98% {
--blink: 72% ;
--eyebrowLeftMove: -5.32 ;
--eyebrowRightMove: -5.5 ;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1) ;
}
68.5% {
--blink: 72% ;
}
69% {
--blink: 8% ;
}
69.5% {
--blink: 72% ;
}
70% {
--blink: 8% ;
}
70.5%{
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0