使用Tweene Timelines创建动画序列实例

Tweene Timelines (Rosetta tribute)。陨石、星空、天体运动、火箭发射。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body,
.all {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Roboto", arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #454545;
    background-color: #62abbe;
    line-height: 1.9;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
p {
    margin: 0 0 0.7em 0;
    padding: 0;
    text-indent: 0;
}
a {
    color: #ddd;
    text-decoration: none;
    outline: none !important;
}
a:hover {
    color: #fff;
    text-decoration: none;
    outline: none !important;
}
.all {
    position: relative;
    width: 100%;
    max-width: 960px;
    height: 100%;
    margin: auto;
    padding: 20px;
}
.object,
.stage * {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 1px);
    background-size: 100% 100%;
}
.stage {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 400px;
    overflow: visible;
}
.scene {
    width: 2000px;
    height: 5000px;
    background-color: transparent;
    opacity: 1;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
.floor {
    width: 200%;
    left: -100%;
    bottom: 25px;
    border-top: 1px solid #333;
}
.axis1,
.axis2,
.axis3,
.axis4,
.axis5 {
    overflow: visible;
    width: 0;
    height: 0;
}
.axis1 {
    -webkit-transform-origin: 800px 25px;
    -ms-transform-origin: 800px 25px;
    transform-origin: 800px 25px;
}
.axis2 {
    -webkit-transform-origin: -800px 25px;
    -ms-transform-origin: -800px 25px;
    transform-origin: -800px 25px;
}
.axis3 {
    -webkit-transform-origin: 400px 25px;
    -ms-transform-origin: 400px 25px;
    transform-origin: 400px 25px;
}
.axis4 {
    -webkit-transform-origin: 300px 25px;
    -ms-transform-origin: 300px 25px;
    transform-origin: 300px 25px;
}
.comet {
    width: 80px;
    height: 50px;
    background-image: url("http://tweene.com/skin/Default/img/67p.svg");
    -webkit-transform: translate3d(1400px, 650px, 1px) scale(1.8);
    transform: translate3d(1400px, 650px, 1px) scale(1.8);
}
.rosetta {
    width: 30px;
    height: 50px;
    background-image: url("http://tweene.com/skin/Default/img/rosetta.svg");
}
.philae {
    width: 30px;
    height: 50px;
    background-image: url("http://tweene.com/skin/Default/img/philae.svg");
}
.planet-1 {
    width: 160px;
    height: 90px;
    background-image: url("http://tweene.com/skin/Default/img/space-planet.svg");
}
.planet-2,
.planet-3,
.planet-4,
.planet-5,
.planet-6,
.planet-7,
.planet-8,
.planet-9,
.planet-10,
.planet-11,
.planet-12 {
    width: 9px;
    height: 9px;
    background-image: url("http://tweene.com/skin/Default/img/space-ball.svg");
}
.planet-1 {
    -webkit-transform: translate3d(380px, 1000px, 1px) scale(2.2);
    transform: translate3d(380px, 1000px, 1px) scale(2.2);
}
.planet-2 {
    width: 290px;
    height: 290px;
    opacity: 0.7;
    -webkit-transform: translate3d(1540px, 2380px, 1px) scale(1);
    transform: translate3d(1540px, 2380px, 1px) scale(1);
}
.planet-3 {
    opacity: 0.8;
    -webkit-transform: translate3d(280px, 3800px, 1px) scale(1.2);
    transform: translate3d(280px, 3800px, 1px) scale(1.2);
}
.planet-4 {
    opacity: 0.7;
    -webkit-transform: translate3d(800px, 3800px, 1px) scale(0.8);
    transform: translate3d(800px, 3800px, 1px) scale(0.8);
}
.planet-5 {
    opacity: 0.6;
    -webkit-transform: translate3d(400px, 4450px, 1px) scale(1);
    transform: translate3d(400px, 4450px, 1px) scale(1);
}
.planet-6 {
    opacity: 0.8;
    -webkit-transform: translate3d(1400px, 3200px, 1px) scale(1);
    transform: translate3d(1400px, 3200px, 1px) scale(1);
}
.planet-7 {
    opacity: 0.9;
    -webkit-transform: translate3d(1600px, 3400px, 1px) scale(0.8);
    transform: translate3d(1600px, 3400px, 1px) scale(0.8);
}
.planet-8 {
    opacity: 0.8;
    -webkit-transform: translate3d(1500px, 2800px, 1px) scale(1.2);
    transform: translate3d(1500px, 2800px, 1px) scale(1.2);
}
.planet-9 {
    opacity: 0.8;
    -webkit-transform: translate3d(1300px, 1800px, 1px) scale(1);
    transform: translate3d(1300px, 1800px, 1px) scale(1);
}
.planet-10 {
    opacity: 0.8;
    -webkit-transform: translate3d(600px, 1400px, 1px) scale(0.9);
    transform: translate3d(600px, 1400px, 1px) scale(0.9);
}
.planet-11 {
    opacity: 0.8;
    -webkit-transform: translate3d(880px, 490px, 1px) scale(1);
    transform: translate3d(880px, 490px, 1px) scale(1);
}
.planet-12 {
    opacity: 0.8;
    -webkit-transform: translate3d(1600px, 800px, 1px) scale(0.9);
    transform: translate3d(1600px, 800px, 1px) scale(0.9);
}
.controls {
    position: absolute;
    width: 400px;
    right: 20px;
    top: 10px;
    text-align: center;
    z-index: 2000;
    color: #111;
}
.controls ul,
.controls li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.controls li {
    position: relative;
    display: inline-block;
    font-size: 36px;
    margin-right: 10px;
}
.controls li:last-child {
    margin-right: 0;
}
.controls span {
    display: inline-block;
    cursor: pointer;
}
.controls span:hover {
    color: #fff;
}
.controls .reverse {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.description {
    position: absolute;
    width: 400px;
    right: 20px;
    top: 70px;
    text-align: left;
    z-index: 1000;
    color: #111;
}
.description h1 {
    font-family: "Roboto Condensed", arial, sans-serif;
    font-weight: 300;
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    text-align: center;
    color: #fff;
}
.description p {
    font-size: 15px;
    margin-bottom: 7px;
}
.description .intro {
    width: 300px;
    margin: 0 auto 7px auto;
    font-family: "Roboto Condensed", arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
}
.description ul {
    width: 300px;
    margin: 0 auto 7px auto;
    font-size: 15px;
    list-style: circle;
    padding: 0 0 0 1.5em;
}
.description li {
    cursor: pointer;
    margin-left: 0;
    padding-left: 0;
}
.description li:hover {
    color: #fff;
}
.description .current {
    color: #ddd;
    font-weight: 400;
}

HTML

<div class="description">
            <h1>A small tribute to Rosetta Mission</h1>
            <p>This demo shows how to achieve animation sequences with Tweene Timelines feature</p>
            <p>

</p>
            <p class="intro">Select the animation library:</p>
            <ul class="driverControls">
                <li class="current" data-driver="gsap">GSAP</li>
                <li data-driver="transit">Transit (CSS Transitions)</li>
                <li data-driver="velocity">Velocity.js</li>
            </ul>
            <p class="intro"><a href="https://tweene.com" target="_blank">Tweene</a> | <a href="https://github.com/SkidX/tweene" target="_blank">Download from Github</a>
            </p>
        </div>

</html>

Tweene Timelines (Rosetta tribute)。陨石、星空、天体运动、火箭发射。

编辑器支持Emmet

快捷键

Tweene Timelines (Rosetta tribute)。陨石、星空、天体运动、火箭发射。

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

使用three.js meshline扩展来实现线条（路线）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：