使用SVG构建的3款人脸表情矢量图

笑、悲伤和愤怒的表情图标。

svg, emoji

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #2B2332;
    text-align: center;
    padding-top: 2em;
}
.eye-line {
    stroke-width: 4px;
    stroke-linecap: round;
}
.green {
    fill: #BCC15B;
    stroke: #BCC15B;
}
.purple {
    fill: rgb(114, 102, 127);
    stroke: rgb(114, 102, 127);
}
.lightorg {
    fill: rgb(240, 143, 127);
    stroke: rgb(240, 143, 127);
}
.nose {
    stroke-width: 4px;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}
.mouth {
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.face:hover {
    -webkit-animation: 2s face-animation infinite;
    animation: 2s face-animation infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
svg {
    margin-right: 5em;
}
circle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    shape-rendering: optimizeQuality;
}
/* Face one */

#svg-smile:hover circle {
    fill: #BCC15B;
}
#svg-smile:hover .eye-line,
#svg-smile:hover .nose,
#svg-smile:hover .mouth {
    stroke: #2B2332;
}
#svg-smile:hover .eye {
    fill: #2B2332;
}
/* Face two */

#svg-unsure:hover circle {
    fill: rgb(114, 102, 127);
}
#svg-unsure:hover .eye-line,
#svg-unsure:hover .nose,
#svg-unsure:hover .mouth {
    stroke: #2B2332;
}
#svg-unsure:hover .eye {
    fill: #2B2332;
}
/* Face three */

#svg-bad:hover circle {
    fill: rgb(240, 143, 127);
}
#svg-bad:hover .eye-line,
#svg-bad:hover .nose,
#svg-bad:hover .mouth {
    stroke: #2B2332;
}
#svg-bad:hover .eye {
    fill: #2B2332;
}
@-webkit-keyframes face-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    80% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes face-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    80% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

HTML

笑、悲伤和愤怒的表情图标。

svg, emoji

编辑器支持Emmet

快捷键

笑、悲伤和愤怒的表情图标。

svg, emoji

使用圆形线形构建的SVG葵花子背景图案

使用SVG和CSS3构建的健康类APP模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：