SVG 南瓜灯 - 踏得网

#31creepySVGs 01: Jack-O-Lantern

SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* GENERAL ========================= */

body {
    background: -webkit-radial-gradient(center, ellipse cover, #B39DDB 0%, #7E57C2 41%, #5E35B1 100%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    font-family: 'Amatica SC', cursive;
    text-align: center;
    color: #fff;
    font-size: 20px;
}
h1,
h2 {
    margin: 0;
}
h1 {
    font-size: 50px;
}
h1 span {
    color: #B2FF59;
}
h2 {
    font-size: 30px;
}
svg {
    height: 40vh;
}
svg:hover {
    cursor: pointer;
}
a {
    color: #fff;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 10px;
    right: 20px;
}
/* PUMPKIN ========================= */

.pumpkin-1 {
    fill: #1e5f30;
}
.pumpkin-2 {
    fill: #82782f;
}
.pumpkin-3 {
    fill: #e45325;
}
.pumpkin-4 {
    fill: #f37021;
}
.pumpkin-5 {
    fill: #f57f20;
}
.pumpkin-6 {
    fill: #212121;
}
#face-02,
#face-03 {
    display: none;
}
#_01-pumpkin {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
#_01-pumpkin:hover #face-01 #right-eye {
    d: path("M439.31,386.71s-7,63.56,49.22,64.76c0,0,56.39-8.17,36.47-40.45S458.4,370.25,439.31,386.71Z");
}
#_01-pumpkin:hover #face-01 #left-eye {
    d: path("M365.95,361.62a8.61,8.61,0,0,0-1.73-1.36,14.17,14.17,0,0,0-6.34-1.46c-27.44-1.79-57,2.28-77.55,22.2-23.75,23-27.85,56.65-29.39,88a14,14,0,0,0,.41,5.29c4.39,12.69,30.66,19.56,42,20.7a81.17,81.17,0,0,0,31.92-3.51c24.18-7.43,42.83-19.45,51.88-43.88,10-26.9,6.61-58-8.5-82.36A19.76,19.76,0,0,0,365.95,361.62Z");
}
#_01-pumpkin:hover #face-01 #mouth {
    d: path("M259.42,510l39.87,24.59-2.38,14.11,20.22,8.76,5.34-16.13,13.3,1.12-0.38,17.9,21.15,4.2,4.61-21.14L382,543l5,18,20.42-.81-3.3-20.89L431.67,537l6.7,18,23.48-7.41,0.39-18.32,24.46-14.47,3.8,17.16,21.09-12.46-3.85-14.66s37.64-27.1,41-49.93c0,0,13.85,34-14.7,84.23,0,0-19.79,29.56-34.42,32.17L493,552.45l-26.44,9.43,6.71,17.22-26,8.61-10.06-16.46-23,4.92,1.74,16.28-23.78,2-3.78-18-20.8-.86-3.3,18.25L343,593.4l-0.48-16.67-19.11-2.07-4,14.07S271.48,569.38,259.42,510Z");
}

HTML

<h2>01: Jack-O-Lantern</h2>

#31creepySVGs 01: Jack-O-Lantern

SVG

编辑器支持Emmet

快捷键

#31creepySVGs 01: Jack-O-Lantern

SVG

HTML5 SVG黑森林月夜无头骑士和金光南瓜

HTML5 SVG可在线定制面部表情的万圣节南瓜

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：