骷髅头上融化的蜡烛

Melting Candle on Skull 还包含一只蜘蛛从骷髅眼中爬出来的动画。

svg, creepy

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

MorphSVGPlugin.convertToPath('polygon');
MorphSVGPlugin.convertToPath('line');

TweenLite.ticker.useRAF(false);

flame.to('#heat-01', 0.65, {
    morphSVG: {
        shape: '#heat-01b'
    },
    ease: Power0.easeInOut
}).to('#heat-01', 0.65, {
    morphSVG: {
        shape: '#heat-01c'
    },
    ease: Power0.easeInOut
}).to('#heat-01', 0.65, {
    morphSVG: {
        shape: '#heat-01b'
    },
    ease: Power0.easeInOut
}).to('#heat-01', 0.65, {
    morphSVG: {
        shape: '#heat-01'
    },
    ease: Power0.easeInOut
});
flame2.to('#heat-02', 0.65, {
    morphSVG: {
        shape: '#heat-02b'
    },
    ease: Power0.easeInOut
}).to('#heat-02', 0.65, {
    morphSVG: {
        shape: '#heat-02c'
    },
    ease: Power0.easeInOut
}).to('#heat-02', 0.65, {
    morphSVG: {
        shape: '#heat-02b'
    },
    ease: Power0.easeInOut
}).to('#heat-02', 0.65, {
    morphSVG: {
        shape: '#heat-02'
    },
    ease: Power0.easeInOut
});
flame3.to('#heat-03', 0.65, {
    morphSVG: {
        shape: '#heat-03b'
    },
    ease: Power0.easeInOut
}).to('#heat-03', 0.65, {
    morphSVG: {
        shape: '#heat-03c'
    },
    ease: Power0.easeInOut
}).to('#heat-03', 0.65, {
    morphSVG: {
        shape: '#heat-03b'
    },
    ease: Power0.easeInOut
}).to('#heat-03', 0.65, {
    morphSVG: {
        shape: '#heat-03'
    },
    ease: Power0.easeInOut
});

var highlight = new TimelineMax({
    delay: 0
});

highlight.to('#highlight', 15, {
    morphSVG: {
        shape: '#highlight-2'
    },
    ease: Power0.easeInOut
}).to('#highlight', 15, {
    morphSVG: {
        shape: '#highlight-3'
    },
    ease: Power0.easeInOut
}).to('#highlight', 15, {
    morphSVG: {
        shape: '#highlight-4'
    },
    ease: Power0.easeInOut
}).to('#highlight', 15, {
    morphSVG: {
        shape: '#highlight-5'
    },
    ease: Power0.easeInOut
});

var wax = new TimelineMax({
    delay: 0
});

wax.to('#wax', 15, {
    morphSVG: {
        shape: '#wax-2'
    },
    ease: Power0.easeInOut
}).to('#wax', 15, {
    morphSVG: {
        shape: '#wax-3'
    },
    ease: Power0.easeInOut
}).to('#wax', 15, {
    morphSVG: {
        shape: '#wax-4'
    },
    ease: Power0.easeInOut
}).to('#wax', 15, {
    morphSVG: {
        shape: '#wax-5'
    },
    ease: Power0.easeInOut
});

var base = new TimelineMax({
    delay: 0
});

base.to('#base', 14.5, {
    morphSVG: {
        shape: '#base-2'
    },
    ease: Power0.easeInOut
}).to('#base', 14.5, {
    morphSVG: {
        shape: '#base-3'
    },
    ease: Power0.easeInOut
}).to('#base', 14.5, {
    morphSVG: {
        shape: '#base-4'
    },
    ease: Power0.easeInOut
}).to('#base', 14.5, {
    morphSVG: {
        shape: '#base-5'
    },
    ease: Power0.easeInOut
});

var web = new TimelineMax({
    delay: 0
});

web.to('#web', 20, {
    morphSVG: {
        shape: '#web-long'
    },
    ease: Power0.easeInOut
});

编译

CSS

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

body {
    background: -webkit-radial-gradient(center, ellipse cover, #78909C 0%, #455A64 41%, #263238 100%);
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: space-around;
    align-items: center;
    min-height: 100vh;
    font-family: 'Amatica SC', cursive;
    text-align: center;
    color: #fff;
    padding-bottom: 65px;
    font-size: 20px;
}
body.ghost-bg {
    background: -webkit-radial-gradient(center, ellipse cover, #009688 0%, #00796B 41%, #004D40 100%);
}
body.spider-bg {
    background: -webkit-radial-gradient(center, ellipse cover, #FFB300 0%, #FFA000 41%, #E65100 100%);
}
a {
    color: #fff;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 10px;
    right: 20px;
}
h1,
h2 {
    margin: 0;
}
h1 {
    font-size: 50px;
}
h1 span {
    color: #B2FF59;
}
h2 {
    font-size: 30px;
}
svg {
    height: 45vh;
}
svg:hover {
    cursor: pointer;
}
a {
    text-decoration: none;
    /* 	color: #FF6F00; */
}
footer {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 0;
    width: 100%;
}
/* SPIDER ========================= */

.spider-1 {
    fill: #212121;
}
.spider-2 {
    fill: #37474f;
}
.spider-3 {
    fill: #f5f5f5;
}
.spider-4 {
    fill: none;
    stroke: #212121;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
.spider-in-skull {
    transform: translateX(170px) translateY(340px) scale(0.15);
}
#web-long {
    display: none;
}
@keyframes weblonger {
    100% {
        /*transform: scale(5.5) translateX(-243px) translateY(0px);*/
    }
}
#legs,
#body,
#eyeballs {
    animation: bodymovetoo 65s forwards;
}
@keyframes bodymovetoo {
    100% {
        transform: translateX(0px) translateY(500px);
    }
}
#legs-right,
#legs-left {
    transform: translateX(-100px) translateY(-100px);
}
#legs-02,
#legs-03 {
    display: none;
}
#legs-right .back {
    animation: back-right 2.5s infinite ease-in-out;
}
#legs-right .mid-back {
    animation: mid-back-right 2.25s infinite ease-in-out;
    animation-delay: 0.6s;
}
#legs-right .mid-front {
    animation: mid-front-right 2.5s infinite ease-in-out;
    animation-delay: 0.3s;
}
#legs-right .front {
    animation: front-right 2.5s infinite ease-in-out;
    animation-delay: 0.3s;
}
#legs-left .back {
    animation: back-left 2.5s infinite ease-in-out;
    animation-delay: 0.3s;
}
#legs-left .mid-back {
    animation: mid-back-left 2.5s infinite ease-in-out;
    animation-delay: 0.9s;
}
#legs-left .mid-front {
    animation: mid-front-left 2.25s infinite ease-in-out;
    animation-delay: 0s;
}
#legs-left .front {
    animation: front-left 2.25s infinite ease-in-out;
    animation-delay: 0.6s;
}
#_03-spider:hover {
    transform-origin: top center;
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes back-right {
    0% {
        d: path("M430.87,415.42a7.5,7.5,0,0,1-2.57-14.55l86.25-55.12L572,182.8a7.5,7.5,0,1,1,13.86,5.73l-59.93,169L433.44,415A7.48,7.48,0,0,1,430.87,415.42Z");
    }
    50% {
        d: path("M430.87,415.42a7.5,7.5,0,0,1-2.57-14.55l86.25-75.12L552,162.8a7.5,7.5,0,1,1,13.86,5.73l-39.93,169L433.44,415A7.48,7.48,0,0,1,430.87,415.42Z");
    }
    100% {
        d: path("M430.87,415.42a7.5,7.5,0,0,1-2.57-14.55l86.25-55.12L572,182.8a7.5,7.5,0,1,1,13.86,5.73l-59.93,169L433.44,415A7.48,7.48,0,0,1,430.87,415.42Z");
    }
}
@keyframes back-left {
    0% {
        d: path("M370.54,415.42a7.5,7.5,0,0,0,2.57-14.55l-86.25-55.12-57.41-163a7.5,7.5,0,1,0-13.86,5.73l59.93,169L368,415A7.48,7.48,0,0,0,370.54,415.42Z");
    }
    50% {
        d: path("M371.76,415.42a7.5,7.5,0,0,0,2.57-14.55l-86.25-75.12-37.41-163a7.5,7.5,0,1,0-13.86,5.73l39.93,169L369.19,415A7.48,7.48,0,0,0,371.76,415.42Z");
    }
    100% {
        d: path("M370.54,415.42a7.5,7.5,0,0,0,2.57-14.55l-86.25-55.12-57.41-163a7.5,7.5,0,1,0-13.86,5.73l59.93,169L368,415A7.48,7.48,0,0,0,370.54,415.42Z");
    }
}
@keyframes mid-back-right {
    0% {
        d: path("M433.8,434.5a7.5,7.5,0,0,1-1.06-14.92l109-15.7L685.44,285.22A7.5,7.5,0,1,1,695,296.78L548,418.12l-113.16,16.3A7.63,7.63,0,0,1,433.8,434.5Z");
    }
    50% {
        d: path("M433.8,434.5a7.5,7.5,0,0,1-1.06-14.92l109-35.7L665.44,265.22A7.5,7.5,0,1,1,675,276.78L548,398.12l-113.16,36.3A7.63,7.63,0,0,1,433.8,434.5Z");
    }
    100% {
        d: path("M433.8,434.5a7.5,7.5,0,0,1-1.06-14.92l109-15.7L685.44,285.22A7.5,7.5,0,1,1,695,296.78L548,418.12l-113.16,16.3A7.63,7.63,0,0,1,433.8,434.5Z");
    }
}
@keyframes mid-back-left {
    0% {
        d: path("M367.61,434.5a7.5,7.5,0,0,0,1.06-14.92l-109-35.7L136,265.22a7.5,7.5,0,1,0-9.55,11.57l127,121.34,113.16,36.3A7.63,7.63,0,0,0,367.61,434.5Z");
    }
    50% {
        d: path("M368.83,434.5a7.5,7.5,0,0,0,1.06-14.92l-109-55.7L157.19,235.22a7.5,7.5,0,1,0-9.55,11.57l107,131.34,113.16,56.3A7.63,7.63,0,0,0,368.83,434.5Z");
    }
    100% {
        d: path("M367.61,434.5a7.5,7.5,0,0,0,1.06-14.92l-109-35.7L136,265.22a7.5,7.5,0,1,0-9.55,11.57l127,121.34,113.16,36.3A7.63,7.63,0,0,0,367.61,434.5Z");
    }
}
@keyframes mid-front-right {
    0% {
        d: path("M662.21,555.83a7.47,7.47,0,0,1-4.79-1.73L537.36,454.37l-95.8-4.51a7.5,7.5,0,1,1,.71-15l100.82,4.75L667,542.56A7.5,7.5,0,0,1,662.21,555.83Z");
    }
    50% {
        d: path("M672.21,535.83a7.47,7.47,0,0,1-4.79-1.73L537.36,444.37l-95.8,5.49a7.5,7.5,0,1,1,.71-15l100.82-5.25L677,522.56A7.5,7.5,0,0,1,672.21,535.83Z");
    }
    100% {
        d: path("M662.21,555.83a7.47,7.47,0,0,1-4.79-1.73L537.36,454.37l-95.8-4.51a7.5,7.5,0,1,1,.71-15l100.82,4.75L667,542.56A7.5,7.5,0,0,1,662.21,555.83Z");
    }
}
@keyframes mid-front-left {
    0% {
        d: path("M129.2,535.83A7.47,7.47,0,0,0,134,534.1l130.07-89.73,95.8,5.49a7.5,7.5,0,1,0-.71-15l-100.82-5.25L124.4,522.56A7.5,7.5,0,0,0,129.2,535.83Z");
    }
    50% {
        d: path("M120.42,495.83a7.47,7.47,0,0,0,4.79-1.73l140.07-59.73,95.8,15.49a7.5,7.5,0,1,0-.71-15L259.55,419.63,115.62,482.56A7.5,7.5,0,0,0,120.42,495.83Z");
    }
    100% {
        d: path("M129.2,535.83A7.47,7.47,0,0,0,134,534.1l130.07-89.73,95.8,5.49a7.5,7.5,0,1,0-.71-15l-100.82-5.25L124.4,522.56A7.5,7.5,0,0,0,129.2,535.83Z");
    }
}
@keyframes front-right {
    0% {
        d: path("M572.21,647.83a7.5,7.5,0,0,1-7.15-5.25L522,505.42,432,454.87a7.5,7.5,0,0,1,7.35-13.08l95.12,53.46,44.89,142.83A7.5,7.5,0,0,1,572.21,647.83Z");
    }
    50% {
        d: path("M572.21,617.83a7.5,7.5,0,0,1-7.15-5.25L512,485.42,432,454.87a7.5,7.5,0,0,1,7.35-13.08l85.12,33.46,54.89,132.83A7.5,7.5,0,0,1,572.21,617.83Z");
    }
    100% {
        d: path("M572.21,647.83a7.5,7.5,0,0,1-7.15-5.25L522,505.42,432,454.87a7.5,7.5,0,0,1,7.35-13.08l95.12,53.46,44.89,142.83A7.5,7.5,0,0,1,572.21,647.83Z");
    }
}
@keyframes front-left {
    0% {
        d: path("M229.2,617.83a7.5,7.5,0,0,0,7.15-5.25l53.11-127.17,79.94-30.54a7.5,7.5,0,1,0-7.35-13.08l-85.12,33.46L222,608.08A7.5,7.5,0,0,0,229.2,617.83Z");
    }
    50% {
        d: path("M220.41,597.83a7.5,7.5,0,0,0,7.15-5.25l63.11-117.17,79.94-20.54a7.5,7.5,0,1,0-7.35-13.08l-85.12,23.46L213.26,588.08A7.5,7.5,0,0,0,220.41,597.83Z");
    }
    100% {
        d: path("M229.2,617.83a7.5,7.5,0,0,0,7.15-5.25l53.11-127.17,79.94-30.54a7.5,7.5,0,1,0-7.35-13.08l-85.12,33.46L222,608.08A7.5,7.5,0,0,0,229.2,617.83Z");
    }
}
/*SKULL */

.skull-1 {
    fill: #9e9e9e;
}
.skull-2 {
    fill: #bdbdbd;
}
.skull-3 {
    fill: #757575;
}
.skull-4 {
    fill: #e0e0e0;
}
.skull-5 {
    fill: #f5f5f5;
}
.skull-6 {
    fill: #f9a823;
}
.skull-7 {
    fill: #fef5a0;
}
.skull-8 {
    fill: #f9bf2c;
}
.skull-9 {
    fill: #fdd836;
}
.skull-10 {
    fill: #feed57;
}
.skull-11 {
    fill: none;
    stroke: #212121;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.skull-12 {
    fill: #fef9c5;
    opacity: 0.8;
}
#flame-02,
#flame-03,
#candle-02,
#candle-05,
#candle-03,
#candle-04 {
    display: none;
}
#flame {
    animation: flame-move 65s forwards;
    /*animation-delay: 0.3s;*/
}
@keyframes flame-move {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(34px);
    }
    75% {
        transform: translateY(57px);
    }
    100% {
        transform: translateY(71px);
    }
}

HTML

<h2>Melting Candle on Skull</h2>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src='https://natcooper.com/js/MorphSVGPlugin.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

Melting Candle on Skull 还包含一只蜘蛛从骷髅眼中爬出来的动画。

svg, creepy

编辑器支持Emmet

快捷键

Melting Candle on Skull 还包含一只蜘蛛从骷髅眼中爬出来的动画。

svg, creepy

使用DoodleSVG.js实现的骷髅头素描加载动画

Snap.svg.js 迷雾中的恐怖骷髅头骨+狰狞的双眼

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：