HTML5/SVG/CSS3 抽象主义“理想精神”动画

很有新意的动画设计和效果。

GSAP，艺术

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

第三方库
作品简介 6493
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// face drawing part
var $geoface = $("#geoface path");

TweenMax.set($geoface, {
    drawSVG: "50% 50%"
});

// $geoface.hide();

// $.wait = function(duration) {
// 	return $.Deferred(function(def) {
// 		setTimeout(def.resolve, duration);
// 	});
// };

// function setToPlay() {
// 	var svgFace = new Vivus('$geoface', {type: 'async', duration: 3000, start: 'manual'});
// 	$geoface.show();
// 	svgFace.play();
// };

//call the set to play
// $.wait(21000).then(setToPlay);

// the rest is in gsap
TweenMax.ticker.fps(60);

var $dances = $(".dance div"),
    $top = $(".top"),
    $ball = $(".ball"),
    $scene = $(".scene"),
    $boy = $(".boy"),
    $paper = $(".paper"),
    $grid = $(".grid"),
    $cloud1 = $(".cloud1"),
    $cloud2 = $(".cloud2"),
    $jump = $(".womanjump"),
    $ender = $(".ender div"),
    $titlecard = $(".titlecard"),
    $text = $(".text");

// the first scene
function sceneOne() {
    var tl = new TimelineLite();

tl.fromTo($top, 1, {
            autoAlpha: 1
        }, {
            autoAlpha: 0
        })
        .staggerTo($dances, 2, {
            scale: 0.1,
            repeat: 3,
            yoyo: true,
            ease: Power2.easeOut
        }, 0.1)
        .staggerTo($dances, 1.5, {
            rotation: "+=100",
            autoAlpha: 0.4,
            scale: 1.5,
            ease: Bounce.easeOut
        }, 0.5, "-=5")
        .staggerTo($dances, 0.5, {
            rotation: -100,
            autoAlpha: 0.2,
            scale: 1.9,
            y: 50,
            ease: Bounce.easeOut
        }, 0.2, "-=5")
        .staggerTo($dances, 1, {
            x: 100,
            y: 200,
            position: "absolute"
        }, 0.2)
        .staggerTo($dances, 1, {
            rotation: "+=150",
            autoAlpha: 0.8,
            ease: Power2.easeOut
        }, 0.2)
        .staggerTo($dances, 1, {
            rotation: "+=150",
            opacity: 0,
            scale: 0,
            ease: Power2.easeOut
        }, 0.2, "-=3")
        .from($ball, 5, {
            autoAlpha: 0,
            background: "#ec4b0b"
        }, "-=5");

tl.timeScale(3);

return tl;
}

// the second scene
function sceneTwo() {
    var tl = new TimelineLite();

tl.to($ball, 3, {
            x: "-=365",
            y: "-=81",
            force3D: "auto"
        })
        .add("scenein", "-=1.5")
        .from($boy, 4, {
            scale: 0.1,
            x: 400
        }, "scenein")
        .from($scene, 4, {
            scale: 0.3,
            autoAlpha: 0,
            force3D: "auto",
            x: 2000
        }, "scenein")
        .to($geoface, 4, {
            drawSVG: true
        }, "scenein");
    tl.timeScale(1.5);

return tl;

}

// the third scene
function sceneThree() {
    var tl = new TimelineLite();

tl.from($paper, 5, {
            autoAlpha: 0
        }, "+=1")
        .to($paper, 4, {
            x: 1000,
            yoyo: true,
            scale: 2.0,
            ease: Power2.easeOut
        }, "-=1")
        .add("sceneout", "-=3.5")
        .to($scene, 3, {
            x: -2000,
            scale: 0.3,
            force3D: "auto",
            ease: Power2.easeIn
        }, "sceneout-=1")
        .to($ball, 6, {
            scale: 0,
            force3D: "auto",
            ease: Bounce.easeOut
        }, "sceneout");
    tl.to($geoface, 1, {
            opacity: 0,
            scale: 0.3,
            rotation: 50,
            ease: Power2.easeOut
        }, "sceneout-=1")
        .from($grid, 4, {
            scale: 0.3,
            autoAlpha: 0,
            x: 2000
        }, "sceneout")
        .to($paper, 1, {
            x: 200,
            y: -250,
            ease: Circ.easeInOut
        }, "-=2")
        .to($paper, 1, {
            x: 550,
            top: 100,
            position: "absolute",
            scale: 1.6,
            rotation: 100,
            ease: Circ.easeInOut
        }, "-=1");

tl.timeScale(2);

return tl;
}

// the fourth scene
function sceneFour() {
    var tl = new TimelineLite();

tl.to($paper, 2, {
            autoAlpha: 0,
            scale: 0,
            y: 100,
            rotation: "-=2000",
            transformOrigin: "50% 50%",
            ease: Power2.easeOut
        }, "-=1")
        .add("liberty", "-=1")
        .fromTo($cloud1, 12, {
            autoAlpha: 0,
            scale: 0.3
        }, {
            autoAlpha: 0.5,
            scale: 1,
            x: 250,
            ease: Power2.easeOut
        }, "liberty")
        .fromTo($cloud2, 12, {
            autoAlpha: 0,
            scale: 0.3
        }, {
            autoAlpha: 0.5,
            scale: 1,
            x: -250,
            ease: Power2.easeOut
        }, "liberty")
        .fromTo($jump, 4, {
            autoAlpha: 0,
            scale: 0.1,
            force3D: "auto"
        }, {
            autoAlpha: 0.85,
            scale: 0.8,
            y: -200,
            force3D: "auto",
            ease: Power4.easeOut
        }, "liberty")
        .staggerFrom($ender, 2, {
            scale: 0.1,
            autoAlpha: 0,
            repeat: 3,
            yoyo: true,
            ease: Power2.easeOut
        }, 0.1, "liberty")
        .add("away", "-=5")
        .to($jump, 8, {
            scale: 0.8,
            autoAlpha: 0,
            y: 50,
            force3D: "auto",
            ease: Power3.easeIn
        }, "away")
        .to($grid, 13, {
            scale: 0.8,
            y: 1000,
            force3D: "auto",
            ease: Power1.easeIn
        }, "away")
        .to($cloud1, 5, {
            autoAlpha: 0.85,
            scale: 0.8,
            x: -400,
            ease: Power1.easeIn
        }, "away")
        .to($cloud2, 5, {
            autoAlpha: 0.85,
            scale: 0.8,
            x: 2000,
            ease: Power1.easeIn
        }, "away")
        .fromTo($titlecard, 2.2, {
            autoAlpha: 0,
            scale: 0.3
        }, {
            autoAlpha: 0.9,
            scale: 1,
            ease: Power4.easeOut
        }, "-=4")
        .fromTo($text, 2, {
            autoAlpha: 0,
            scale: 0.3
        }, {
            autoAlpha: 0.9,
            scale: 1,
            ease: Back.easeInOut
        }, "-=3.75");

return tl;

tl.timeScale(1.5);
}

var master = new TimelineLite();
master.add(sceneOne(), "scene1")
    .add(sceneTwo(), "scene2")
    .add(sceneThree(), "scene3")
    .add(sceneFour(), "scene4");

//master.seek("scene2+=3");

编译

CSS

body {
    background: #b01500;
    animation: bk-chg 2s 11s ease-in-out both;
    width: 100%;
    height: 100%;
}
@keyframes bk-chg {
    100% {
        background: #0b0e1e;
    }
}
.top {
    width: 1500px;
    height: 1000px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 5000;
    background: #b01500;
}
.dance {
    width: 300px;
    height: 75px;
    margin: 150px auto 0 470px;
}
.dance div {
    display: inline-block;
    width: 50px;
    height: 27px;
    background: #ec4b0b;
    position: relative;
    z-index: 500;
}
.dance div:before {
    content: "";
    position: absolute;
    top: -17px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 17px solid #ec4b0b;
}
.dance div:after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 17px solid #ec4b0b;
}
.ender {
    width: 500px;
    height: 700px;
    position: absolute;
    left: 420px;
    top: 100px;
}
.ender div {
    display: inline-block;
    width: 25px;
    height: 700px;
    background: #8b0b1d;
    position: relative;
    z-index: 75;
}
.ball {
    background: #0b0e1e;
    border: 1px solid #91a1a1;
    border-radius: 50%;
    width: 115px;
    height: 115px;
    position: absolute;
    z-index: 100;
    transform: translate3d(537px, 82px, 0);
}
.paper {
    position: absolute;
    z-index: 70;
    width: 80px;
    height: 100%;
    left: 170px;
    top: 60px;
    transform: translateZ(0, 0, 0);
}
.manypapers {
    position: absolute;
    z-index: 70;
    width: 250px;
    height: 250px;
    transform: translate3d(430px, -120px, 0);
    display: none;
}
.boy {
    position: absolute;
    z-index: 50;
    background: url("/uploads/160501/boy-sit.png") left top no-repeat;
    width: 300px;
    height: 271px;
    transform: translate3d(165px, 300px, 0);
}
.scene {
    position: absolute;
    z-index: 25;
    background: url("/uploads/160501/persp.jpg") left top no-repeat;
    width: 1200px;
    height: 614px;
    top: 0;
    left: 0;
}
#geoface {
    position: absolute;
    z-index: 1000;
    transform: translate3d(134px, -65px, 0);
}
.grid {
    background: url("/uploads/160501/grid.jpg") left top no-repeat;
    width: 800px;
    height: 466px;
    position: absolute;
    transform: translate3d(200px, -100px, 0);
}
.cloud1,
.cloud2 {
    position: absolute;
    z-index: 50;
    top: 0px;
}
.cloud1 {
    left: -100px;
}
.cloud2 {
    right: -100px;
}
.womanjump {
    position: absolute;
    z-index: 300;
    top: 200px;
    left: 400px;
}
.titlecard {
    position: absolute;
    width: 300px;
    left: 450px;
    top: 200px;
    height: 200px;
    background: #5d101e;
    text-align: center;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 50px;
    z-index: 3000;
    opacity: 0.8;
}
.titlecard h1 {
    font-weight: 400;
    color: #f9e7d6;
    font-size: 40px;
    margin-bottom: 0;
}
.titlecard a {
    color: #e2937f;
}
.titlecard p {
    color: #ad6651;
}
.titlecard p,
.titlecard a,
.titlecard a:visited {
    font-weight: 300;
    font-size: 30px;
    margin-top: 0;
    font-style: normal;
    text-decoration: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
    .boy {
        background: url("/uploads/160501/boy-sit-r.png") left top no-repeat;
        background-size: 300px 271px;
    }
    .scene {
        background: url("/uploads/160501/persp2.jpg") left top no-repeat;
        background-size: 1200px 614px;
    }
}

HTML

</div>
    
    <div class="top"></div>
</body>

很有新意的动画设计和效果。

GSAP，艺术

编辑器支持Emmet

快捷键

很有新意的动画设计和效果。

GSAP，艺术

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：