Happy Halloween 南瓜灯怪物

有灯光闪烁的动效

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Slackey);
body {
    font-size: 2em;
    background: #222;
}
h1 {
    text-align: center;
    font-family: 'Slackey', cursive;
    font-size: 1em;
    color: white;
    text-shadow: 0.05em 0.05em orange;
}
.pumpkin {
    position: relative;
    width: 9.25em;
    margin: 2em auto 0;
}
.pumpkin:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -1em;
    left: 4em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
    background-color: #521515;
    width: 1em;
    height: 2em;
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gourd {
    margin-left: 4em;
}
.gourd span {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    background: #996300;
    width: 5em;
    height: 5em;
    margin-left: -4em;
}
.gourd span.gp1 {
    border-left: 0.0625em solid black;
}
.gourd span.gp4 {
    border-right: 0.0625em solid black;
}
.face {
    text-align: center;
    width: 6em;
    height: 4em;
    position: absolute;
    top: 0.5em;
    left: 1.5em;
}
.face span {
    display: block;
    background: black;
    border-bottom: 0.125em solid #664200;
    -moz-animation: pulsate 2s ease-in infinite;
    -webkit-animation: pulsate 2s ease-in infinite;
    animation: pulsate 2s ease-in infinite;
}
.face span.eye {
    display: inline-block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
}
.face span.eye.right {
    margin-left: 1em;
}
.face span.mouth {
    margin: 0.25em auto 0;
    width: 75%;
    height: 1.5em;
    -moz-border-radius: 0.75em 0.75em 0 0;
    -webkit-border-radius: 0.75em;
    border-radius: 0.75em 0.75em 0 0;
    -moz-animation: smile 2s ease-in infinite, pulsate 2s ease-in infinite;
    -webkit-animation: smile 2s ease-in infinite, pulsate 2s ease-in infinite;
    animation: smile 2s ease-in infinite, pulsate 2s ease-in infinite;
}
@-moz-keyframes pulsate {
    0%, 100% {
        background: black;
        -moz-box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
    }
    50% {
        background: yellow;
        -moz-box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
    }
}
@-webkit-keyframes pulsate {
    0%, 100% {
        background: black;
        -webkit-box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
    }
    50% {
        background: yellow;
        -webkit-box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
    }
}
@keyframes pulsate {
    0%, 100% {
        background: black;
        -moz-box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
        -webkit-box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.75);
    }
    50% {
        background: yellow;
        -moz-box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
        -webkit-box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
        box-shadow: 0 0 3em 1em rgba(218, 165, 32, 0.75);
    }
}
@-moz-keyframes smile {
    0%, 100% {
        -moz-border-radius: 0.75em 0.75em 0 0;
        border-radius: 0.75em 0.75em 0 0;
    }
    50% {
        -moz-border-radius: 0 0 0.75em 0.75em;
        border-radius: 0 0 0.75em 0.75em;
    }
}
@-webkit-keyframes smile {
    0%, 100% {
        -webkit-border-radius: 0.75em;
        border-radius: 0.75em 0.75em 0 0;
    }
    50% {
        -webkit-border-radius: 0;
        border-radius: 0 0 0.75em 0.75em;
    }
}
@keyframes smile {
    0%, 100% {
        -moz-border-radius: 0.75em 0.75em 0 0;
        -webkit-border-radius: 0.75em;
        border-radius: 0.75em 0.75em 0 0;
    }
    50% {
        -moz-border-radius: 0 0 0.75em 0.75em;
        -webkit-border-radius: 0;
        border-radius: 0 0 0.75em 0.75em;
    }
}

HTML

有灯光闪烁的动效

编辑器支持Emmet

快捷键

有灯光闪烁的动效

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

Krpano（HTML5 WebVR Viewer）在线演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：