html5表情包网站,HTML5 CSS3 可爱的表情动画

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

body {

background-color: #F79329;

}

.container {

margin: 0 auto;

padding: 10px;

text-align: center;

}

h2 {

font-family: 'press start 2p';

color: #2F2F2F;

}

.face {

width: 200px;

height: 200px;

background-color: #FCC21B;

margin: 55px auto 0;

border-radius: 50%;

moz-border-radius: 50%;

position: relative;

animation: hover 5s ease-in-out infinite;

animation-direction: alternate;

}

.eye1,

.eye2 {

position: absolute;

height: 20px;

width: 20px;

background-color: #2F2F2F;

border-radius: 50%;

top: 88px;

animation: blink 2s ease-in-out infinite;

}

.eye1 {

left: 45px;

}

.eye2 {

left: 140px;

}

.happyeye {

position: absolute;

top: 88px;

height: 20px;

width: 20px;

background-color: #2F2F2F;

border-radius: 50%;

animation: none;

transition: all 0.3s linear;

animation: blink 4s ease-in-out infinite;

}

.happyeye:after {

position: absolute;

content: "";

height: 20px;

width: 20px;

background-color: #FCC21B;

border-radius: 50%;

top: 9px;

left: 0px;

}

.sadeye {

position: absolute;

height: 20px;

width: 20px;

background-color: #2F2F2F;

border-radius: 50%;

top: 88px;

border-bottom: 5px solid #38AFE9;

transition: all 0.3s linear;

animation: blink 2s ease-in-out infinite, crying 1s ease-in-out infinite;

animation-direction: alternate;

}

.loveeye {

position: absolute;

height: 20px;

width: 20px;

background-color: #FF88C8;

transform: rotate(-45deg);

border-bottom: 2px solid #FF34BA;

border-left: 2px solid #FF34BA;

top: 86px;

border-radius: 0%;

animation: beat 2s ease-in-out infinite;

}

.loveeye:before {

position: absolute;

content: "";

height: 20px;

width: 20px;

background-color: #FF88C8;

border-radius: 50%;

transform: rotate(-225deg);

top: 0px;

left: 12px;

border-top: 2px solid #FF34BA;

border-left: 2px solid #FF34BA;

}

.loveeye:after {

position: absolute;

content: "";

height: 20px;

width: 20px;

background-color: #FF88C8;

border-radius: 50%;

transform: rotate(-310deg);

top: -15px;

left: -2px;

border-top: 2px solid #FF34BA;

border-left: 2px solid #FF34BA;

}

.mouth {

position: absolute;

height: 5px;

width: 40px;

background-color: #FCC21B;

border: 3px solid transparent;

border-bottom: 5px solid #2F2F2F;

border-radius: 5px;

top: 125px;

left: 82px;

}

.happymouth {

position: absolute;

height: 30px;

width: 45px;

background-color: #FCC21B;

border-radius: 50%;

border: 3px solid transparent;

border-bottom: 5px solid #2F2F2F;

top: 105px;

left: 79px;

transition: all 0.3s linear;

}

.sadmouth {

position: absolute;

height: 30px;

width: 45px;

background-color: #FCC21B;

border-radius: 50%;

border: 3px solid transparent;

border-top: 5px solid #2F2F2F;

top: 125px;

left: 79px;

transition: all 0s linear;

}

.cheek {

position: absolute;

top: 100px;

left: 20px;

background: radial-gradient(#F79329 5%, transparent 50%);

border-radius: 50%;

width: 60px;

height: 60px;

transition: all 0.3s linear;

}

.cheek2 {

position: absolute;

content: "";

top: 100px;

left: 125px;

background: radial-gradient(#F79329 5%, transparent 50%);

border-radius: 50%;

width: 60px;

height: 60px;

transition: all 0.3s linear;

}

.lovecheeks {

position: absolute;

background: radial-gradient(#F79329 5%, transparent 50%);

border-radius: 50%;

width: 75px;

height: 75px;

transition: all 0.3s linear;

margin-left: -5px;

}

.bouncy {

animation: select 1s ease-in-out infinite;

}

@keyframes hover {

0% {

transform: translateY(0);

}

35% {

transform: translateY(-10px);

}

85% {

transform: translateY(-5px);

}

100% {

transform: translateY(0);

}

}

@keyframes blink {

0% {

height: 20px;

}

97% {

height: 20px;

}

100% {

height: 0px;

}

}

@keyframes crying {

0% {

border-bottom: 5px solid #38AFE9;

}

97% {

border-bottom: 10px solid #38AFE9;

}

100% {

border-bottom: 15px solid #38AFE9;

}

}

@keyframes beat {

0% {

transform: scale(1.2) rotate(-45deg);

;

}

97% {

transform: scale(1.0) rotate(-45deg);

}

100% {

transform: scale(1.4) rotate(-45deg);

;

}

}

@keyframes select {

0% {

transform: translateY(0);

}

50% {

transform: translateY(-5px);

}

100% {

transform: translateY(0);

}

}