<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>害羞鬼动画</title>
<style>
@-webkit-keyframes hover {
0% {
top: 0;
}
100% {
top: 8px;
}
}
@keyframes hover {
0% {
top: 0;
}
100% {
top: 8px;
}
}
@-webkit-keyframes star-entrance {
0% {
-webkit-transform: rotate(-735deg) scale(0, 0);
transform: rotate(-735deg) scale(0, 0);
}
100% {
-webkit-transform: rotate(0) scale(1, 1);
transform: rotate(0) scale(1, 1);
}
}
@keyframes star-entrance {
0% {
-webkit-transform: rotate(-735deg) scale(0, 0);
transform: rotate(-735deg) scale(0, 0);
}
100% {
-webkit-transform: rotate(0) scale(1, 1);
transform: rotate(0) scale(1, 1);
}
}
@-webkit-keyframes star-exit {
0% {
-webkit-transform: rotate(0) scale(1, 1);
transform: rotate(0) scale(1, 1);
}
100% {
-webkit-transform: rotate(360deg) scale(0, 0);
transform: rotate(360deg) scale(0, 0);
}
}
@keyframes star-exit {
0% {
-webkit-transform: rotate(0) scale(1, 1);
transform: rotate(0) scale(1, 1);
}
100% {
-webkit-transform: rotate(360deg) scale(0, 0);
transform: rotate(360deg) scale(0, 0);
}
}
@-webkit-keyframes twinkle {
0% {
-webkit-transform: rotate(0deg) scale(1, 1);
transform: rotate(0deg) scale(1, 1);
}
25% {
-webkit-transform: rotate(10deg) scale(0.8, 0.8);
transform: rotate(10deg) scale(0.8, 0.8);
}
50% {
-webkit-transform: rotate(0deg) scale(0.9, 0.9);
transform: rotate(0deg) scale(0.9, 0.9);
}
75% {
-webkit-transform: rotate(-20deg) scale(0.6, 0.6);
transform: rotate(-20deg) scale(0.6, 0.6);
}
100% {
-webkit-transform: rotate(0deg) scale(1, 1);
transform: rotate(0deg) scale(1, 1);
}
}
@keyframes twinkle {
0% {
-webkit-transform: rotate(0deg) scale(1, 1);
transform: rotate(0deg) scale(1, 1);
}
25% {
-webkit-transform: rotate(10deg) scale(0.8, 0.8);
transform: rotate(10deg) scale(0.8, 0.8);
}
50% {
-webkit-transform: rotate(0deg) scale(0.9, 0.9);
transform: rotate(0deg) scale(0.9, 0.9);
}
75% {
-webkit-transform: rotate(-20deg) scale(0.6, 0.6);
transform: rotate(-20deg) scale(0.6, 0.6);
}
100% {
-webkit-transform: rotate(0deg) scale(1, 1);
transform: rotate(0deg) scale(1, 1);
}
}
@-webkit-keyframes waving {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
25% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
50% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
75% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes waving {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
25% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
50% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
75% {
-webkit-transform: rotate(-55deg);
transform: rotate(-55deg);
}
100% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
html {
height: 100%;
}
body {
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #292B25;
}
.scene-container {
position: relative;
width: 140px;
height: 160px;
}
.scene-container:focus {
outline: none;
}
.scene-container.run-away .ghost {
-webkit-transform: rotateX(-10deg) scale3d(1.4, 4, 1) translate3d(0, 130%, -30px);
transform: rotateX(-10deg) scale3d(1.4, 4, 1) translate3d(0, 130%, -30px);
transition: -webkit-transform 800ms ease;
transition: transform 800ms ease;
transition: transform 800ms ease, -webkit-transform 800ms ease;
}
.scene-container.descend .ghost {
-webkit-transform: translate3d(0, 130%, 0);
transform: translate3d(0, 130%, 0);
}
.ghost-container {
position: relative;
width: 80px;
height: 140px;
padding: 20px 30px 0 30px;
overflow: hidden;
-webkit-perspective: 30px;
perspective: 30px;
}
.ghost {
position: relative;
height: 115px;
z-index: 1;
transition: -webkit-transform 2000ms ease-out;
transition: transform 2000ms ease-out;
transition: transform 2000ms ease-out, -webkit-transform 2000ms ease-out;
}
.ghost.hover {
-webkit-animation: hover 600ms ease-in-out infinite alternate;
animation: hover 600ms ease-in-out infinite alternate;
}
.ghost-head {
position: relative;
width: 80px;
height: 0;
padding-top: 100%;
border-radius: 100%;
background-color: #F0EFDC;
}
.ghost-head .ghost-face {
position: absolute;
bottom: 10px;
left: 10px;
width: 50px;
height: 30px;
z-index: 1;
}
.eyes-row,
.mouth-row {
position: relative;
height: 10px;
}
.mouth-row {
margin-top: 3px;
}
.eye {
height: 10px;
width: 10px;
background-color: #271917;
border-radius: 100%;
position: absolute;
bottom: 0;
transition: height 50ms ease;
}
.eye.left {
left: 5px;
}
.eye.right {
right: 5px;
}
.eye.blink {
height: 0;
}
.mouth {
position: absolute;
left: 50%;
top: 0;
height: 10px;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.mouth .mouth-top {
width: 18px;
height: 2px;
border-radius: 2px 2px 0 0;
background-color: #271917;
}
.mouth .mouth-bottom {
position: absolute;
width: 18px;
height: 8px;
bottom: 0;
overflow: hidden;
transition: height 150ms ease;
}
.mouth .mouth-bottom:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 18px;
height: 16px;
border-radius: 100%;
background-color: #271917;
}
.mouth.open .mouth-bottom {
height: 16px;
}
.mouth.closed .mouth-bottom {
height: 0;
}
.cheek {
position: absolute;
top: 0;
width: 12px;
height: 4px;
background-color: #F5C1B6;
border-radius: 100%;
}
.cheek.left {
left: 0;
}
.cheek.right {
right: 0;
}
.ghost-body {
position: absolute;
top: 40px;
height: 0;
width: 80px;
padding-top: 85%;
background-color: #F0EFDC;
}
.ghost-hand {
height: 36px;
width: 22px;
background: #F0EFDC;
border-radius: 100%/90%;
position: absolute;
}
.ghost-hand.hand-left {
left: -12px;
top: 10px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
left: 0;
top: 5px;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.ghost-hand.hand-left.waving {
-webkit-animation: waving 400ms linear;
animation: waving 400ms linear;
}
.ghost-hand.hand-right {
right: -12px;
top: 10px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.ghost-skirt {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.ghost-skirt .pleat {
width: 20%;
height: 8px;
border-radius: 100%;
}
.ghost-skirt .pleat.down {
background-color: #F0EFDC;
}
.ghost-skirt .pleat.up {
background-color: #292B25;
position: relative;
top: 1px;
}
.shadow-container {
transition: -webkit-transform 800ms ease;
transition: transform 800ms ease;
transition: transform 800ms ease, -webkit-transform 800ms ease;
}
.shadow-container.disappear {
-webkit-transform: scale3d(0, 1, 1);
transform
