html图片表情怎么搞,学习使用HTML5/CSS3来制作简单的表情动画

CSS

语言：

CSSSCSS

确定

html,

body {

background: #fafafa;

height: 100%;

}

@keyframes ce-eye-anime {

0%, 40% {

transform: scaleY(1);

transform-origin: center;

}

50% {

transform: scaleY(0.1);

transform-origin: center;

}

60%,

100% {

transform: scaleY(1);

transform-origin: center;

}

}

@keyframes ce-mouth-anime {

0%, 35% {

transform: scaleY(1);

transform-origin: center;

}

45%,

55% {

transform: scaleY(0.3);

transform-origin: center;

}

65%,

100% {

transform: scaleY(1);

transform-origin: center;

}

}

.ce-face {

position: relative;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

background: #ffd84f;

width: 90px;

height: 90px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

.ce-eyes {

position: relative;

top: 30px;

}

.ce-eye {

position: absolute;

background: #b57b1c;

animation: ce-eye-anime 3s ease-in-out infinite;

width: 12px;

height: 12px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

.ce-eye-left {

left: 25px;

}

.ce-eye-right {

right: 25px;

}

.ce-mouth {

position: absolute;

bottom: 25px;

left: 30px;

animation: ce-mouth-anime 6s ease-in-out infinite;

background: #b57b1c;

width: 30px;

height: 6px;

}