学习使用HTML5/CSS3来制作简单的表情动画

CSS Emoji Neutral Face

css3, emoji

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2128
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

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;
}

HTML

CSS Emoji Neutral Face

css3, emoji

编辑器支持Emmet

快捷键

CSS Emoji Neutral Face

css3, emoji

HTML5/CSS3很棒的一款提示用户向下滚动页面的箭头动画

HTML5/CSS3融化的蜡烛和烛火动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：