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

svg, horse, forest

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function sceneOne() {
    var tl = new TimelineMax();

tl.add("begin", "+=1");
    tl.fromTo(".pumpkin", 2, {
        scale: 0,
        x: 0,
        y: 0,
        rotation: 180
    }, {
        scale: 1,
        bezier: {
            type: "soft",
            values: [{
                x: 400,
                y: 175
            }, {
                x: 30,
                y: 250
            }],
            autoRotate: false
        },
        rotation: 0,
        ease: Circ.easeInOut
    }, "begin+=1");
    tl.to("#face, #back-area", 1, {
        opacity: 0.5,
        yoyo: true,
        repeatDelay: 0.65,
        repeat: -1,
        ease: RoughEase.ease.config({
            template: Power0.easeNone,
            strength: 1,
            points: 20,
            taper: "none",
            randomize: true,
            clamp: false
        })
    }, "begin+=3");
    tl.from("h1", 2, {
        opacity: 0,
        ease: RoughEase.ease.config({
            template: Power0.easeNone,
            strength: 1,
            points: 20,
            taper: "none",
            randomize: true,
            clamp: false
        })
    }, "begin+=3");
    tl.from("h1", 1, {
        rotationX: 180,
        ease: Sine.easeOut
    }, "begin+=3");

return tl;
}

//add it all to master timeline
var master = new TimelineMax();
master.add(sceneOne(), "first");

编译

CSS

body,
html {
    width: 100%;
    height: 100%;
    min-height: 700px;
    background: #041e2b;
    /* Old browsers */
    /* FF3.6-15 */
    
    background: -webkit-linear-gradient(top, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%);
    /* Chrome10-25,Safari5.1-6 */
    
    background: linear-gradient(to bottom, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#041e2b', endColorstr='#000000', GradientType=0);
    /* IE6-9 */
    
    font-family: 'Freckle Face', cursive;
}
#foreground {
    height: 600px;
    position: absolute;
    margin-top: -200px;
    overflow-y: hidden;
}
h1 {
    position: absolute;
    top: 550px;
    width: 100%;
    text-align: center;
    font-size: 45px;
    color: orange;
    white-space: pre;
    margin-left: 20px;
}
span {
    letterspacing: 200px;
}
.moon {
    left: 25%;
    position: absolute;
    top: 100px;
}
.horseman {
    width: 184px;
    height: 123px;
    background: url("/uploads/1805/horse-hallow5.svg");
    -webkit-animation: horsemove 0.7s steps(15) infinite;
    animation: horsemove 0.7s steps(15) infinite;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 300px;
}
.pumpkin {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 300px;
}
.ground {
    width: 151%;
    height: 697px;
    position: absolute;
    background-size: 800px 716px;
    left: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.front {
    background: url("/uploads/1805/hallowfront4.svg") repeat-x;
    background-size: 1000px 871px;
    top: -100px;
    -webkit-animation: bk 20s -5s linear infinite;
    animation: bk 20s -5s linear infinite;
}
.frontmid {
    background: url("/uploads/1805/hallowmidfront2.svg") repeat-x;
    background-size: 1000px 871px;
    top: -100px;
    -webkit-animation: bk 50s -5s linear infinite;
    animation: bk 50s -5s linear infinite;
}
.mid {
    background: url("/uploads/1805/hallowmid2.svg") repeat-x;
    background-size: 1000px 871px;
    top: -100px;
    -webkit-animation: bk 100s -5s linear infinite;
    animation: bk 100s -5s linear infinite;
}
.back {
    background: url("/uploads/1805/hallowback2.svg") repeat-x;
    background-size: 1000px 871px;
    top: -100px;
    -webkit-animation: bk 100s -5s linear infinite;
    animation: bk 100s -5s linear infinite;
}
@-webkit-keyframes horsemove {
    100% {
        background-position: 0 -1848px;
    }
}
@keyframes horsemove {
    100% {
        background-position: 0 -1848px;
    }
}
@-webkit-keyframes bk {
    100% {
        background-position: -200% 0;
    }
}
@keyframes bk {
    100% {
        background-position: -200% 0;
    }
}

HTML

<h1>happy halloween</h1>

svg, horse, forest

编辑器支持Emmet

快捷键

svg, horse, forest

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

HTML5 SVG联系我们页面的一个按钮变形和弹窗动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：