逼真的蜘蛛网和彩色蜘蛛爬行动画

Spider and Nets 还包含一个粘稠物（血液）掉落动画。

gsap, bug

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var sitewidth = 1000,
    siteheight = 800;

var rangeToRange = function(oldVal, oldMax, oldMin, newMax, newMin) {
    return (((oldVal - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin;
};

// Animates the Spider for the halloween landing page

var $spider = $('#spider'),
    spiderWidth = $spider.width(),
    spiderHeight = $spider.height();

var ps = function(x, y) {

var values = {
        x: rangeToRange(x, 100, 0, sitewidth + spiderWidth, 0),
        y: rangeToRange(y, 100, 0, siteheight + spiderHeight, 0)
    };

return values;

};

var spiderAnimate = function() {

TweenMax
        .to($spider, 8, {
            bezier: {
                type: 'soft',
                values: [
                    ps(0, 10),
                    ps(20, 30),
                    ps(60, -10)
                ],
                autoRotate: true
            },
            ease: Power1.easeInOut,
            force3D: true
        });

TweenMax
        .to($spider, 8, {
            bezier: {
                type: 'soft',
                values: [
                    ps(0, 40),
                    ps(110, 40)
                ],
                autoRotate: true
            },
            ease: Power1.easeInOut,
            delay: 7,
            force3D: true,
            onComplete: function() {

TweenMax
                    .set($spider, {
                        x: 0,
                        y: 0
                    });

setTimeout(spiderAnimate, 2000);

}
        });

};

spiderAnimate();

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:700);
.spider__inner {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.spider__inner .legs--left .one,
.spider__inner .legs--left .three,
.spider__inner .legs--right .two,
.spider__inner .legs--right .four {
    -webkit-animation-name: creep;
    animation-name: creep;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.spider__inner .legs--left .two,
.spider__inner .legs--left .four,
.spider__inner .legs--right .one,
.spider__inner .legs--right .three {
    -webkit-animation-name: creep-alt;
    animation-name: creep-alt;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
.spider__inner .body {
    -webkit-animation-name: body-creep;
    animation-name: body-creep;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
    animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes drip {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes drip {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes creep {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70%,
    100% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
}
@keyframes creep {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    70%,
    100% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
}
@-webkit-keyframes creep-alt {
    0% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    70%,
    100% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}
@keyframes creep-alt {
    0% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    70%,
    100% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}
@-webkit-keyframes body-creep {
    0% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
}
@keyframes body-creep {
    0% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    100% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
}
html {
    font-size: 10px;
    background: #ffffff url("/uploads/161001/dots-blue.png") 0 0;
}
.wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    height: 600px;
    background: #1B2240 url("/uploads/161001/dots-red.png") 0 0;
}
span {
    display: block;
}
#spider {
    z-index: 2000;
    position: absolute;
    top: -32rem;
    left: -42rem;
    width: 47.5rem;
    height: 52.6rem;
}
.spider__inner {
    position: relative;
    width: 47.5rem;
    height: 52.6rem;
    -webkit-transform: scale(0.2) rotate(90deg);
    transform: scale(0.2) rotate(90deg);
}
@media screen and (min-width: 1024px) {
    .spider__inner {
        -webkit-transform: scale(0.3) rotate(90deg);
        transform: scale(0.3) rotate(90deg);
    }
}
.spider__inner .body,
.spider__inner .one,
.spider__inner .two,
.spider__inner .three,
.spider__inner .four {
    content: "";
    display: block;
    position: absolute;
}
.spider__inner .body {
    top: 16%;
    left: 36%;
    width: 14rem;
    height: 37.5rem;
    background-image: url("/uploads/161001/body.png");
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.spider__inner .legs--left .one {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    top: 4rem;
    left: 5.5rem;
    width: 13.8rem;
    height: 16.1rem;
    background-image: url("/uploads/161001/leg-left-one.png");
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}
.spider__inner .legs--left .two {
    top: 17.6rem;
    left: 1rem;
    width: 17.3rem;
    height: 7.6rem;
    background-image: url("/uploads/161001/leg-left-two.png");
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}
.spider__inner .legs--left .three {
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
    top: 25.6rem;
    left: 3.4rem;
    width: 16.4rem;
    height: 5.8rem;
    background-image: url("/uploads/161001/leg-left-three.png");
    -webkit-transform-origin: center right;
    transform-origin: center right;
}
.spider__inner .legs--left .four {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    left: 8.1rem;
    bottom: 3rem;
    width: 13.1rem;
    height: 22.5rem;
    background-image: url("/uploads/161001/leg-left-four.png");
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.spider__inner .legs--right .one {
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
    top: 4rem;
    right: 5.5rem;
    width: 14.6rem;
    height: 17.7rem;
    background-image: url("/uploads/161001/leg-right-one.png");
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}
.spider__inner .legs--right .two {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    top: 14.3rem;
    right: 1rem;
    width: 17.7rem;
    height: 10.0rem;
    background-image: url("/uploads/161001/leg-right-two.png");
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}
.spider__inner .legs--right .three {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    top: 25rem;
    right: 3.8rem;
    width: 15.5rem;
    height: 5.7rem;
    background-image: url("/uploads/161001/leg-right-three.png");
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.spider__inner .legs--right .four {
    bottom: 2rem;
    right: 6.4rem;
    width: 14rem;
    height: 23.3rem;
    background-image: url("/uploads/161001/leg-right-four.png");
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.drip {
    position: absolute;
    top: -.6rem;
    left: -.1rem;
    -webkit-animation-name: drip;
    animation-name: drip;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
    animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
}
.cobweb {
    position: absolute;
    top: 0;
    right: 0;
}
body {
    margin: 0;
}

HTML

Spider and Nets 还包含一个粘稠物（血液）掉落动画。

gsap, bug

编辑器支持Emmet

快捷键

Spider and Nets 还包含一个粘稠物（血液）掉落动画。

gsap, bug

Github吉祥物章鱼猫的蜘蛛人形象动画

GSAP和Three.js做的雪花粒子动画形成海盗标志

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：