GSAP 飘雪背景的机器人舞动画图标

带很棒的渐变色标题和一个抖动的按钮动画。

gsap, landing, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$('.txt').html(function(i, html) {
  var chars = $.trim(html).split("");

return '<span>' + chars.join('</span><span>') + '</span>';
});
$(window).click(function(){
  var st=new TimelineMax({repeat:0});
   var st2=new TimelineMax({repeat:0});
  var st3=new TimelineMax({repeat:0});
var st4=new TimelineMax({repeat:0});
var st5=new TimelineMax({repeat:0});
var st6=new TimelineMax({repeat:0});
  var st7=new TimelineMax({repeat:0});
    var st8=new TimelineMax({repeat:0});
  var st9=new TimelineMax({repeat:0});
 var st10=new TimelineMax({repeat:0});
 var st11=new TimelineMax({repeat:1});
  var st12=new TimelineMax({repeat:0});
st3
// .from('#XMLID', 0.66, {y: -35}, 0.33)
// 		.to("#XMLID", 2.5, {rotationY: 360*5, ease: Power2.easeOut, transformOrigin:'50% 50%', delay: 0.36})
// 		.to('#XMLID', 0.46, {y: -35, delay: 0.16});
	
	
.to("#topS", 0.13, {scaleY: 0.2, transformOrigin:'50% 50%'}, 1.6)
		.to("#topS", 1.08, {scaleY: 1,visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
st

.to("#topS2", 0.33, {scale: 0, transformOrigin:'50% 50%'}, 1.6)
		.to("#topS2", 1.08, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
		st2
  .to("#slantS", 0.43, {scale: 0, transformOrigin:'50% 50%'}, 1.6)
		.to("#slantS", 1.08, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
		st4
.to("#slantS2", 0.53, {scale: 0, transformOrigin:'50% 50%'}, 1.6)
		.to("#slantS2", 1.08, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
		st5
.to("#slantS3", 0.63, {scale: 0, transformOrigin:'50% 50%'}, 1.6)
		.to("#slantS3", 1.08, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});
		st6
			.to('#topV', 0.2, {scaleY: 0, scaleX: 1,visibility:'visible' , transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3)})
		.from('#topV', 0.46, {scaleY: 0, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1),delay:0.1});

st7
.to("#middleS", 1.13, {scale: 0, transformOrigin:'50% 50%'}, 1.6)
		.to("#middleS", 1.58, {scale: 1, visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.3)});

st8

.set('#slantV', {scale: 0, autoAlpha: 1, transformOrigin: 'center top'})
		.fromTo('#slantV', 0.5, {y: 0}, {y: 0,visibility:'visible' })
		.from('#slantV', 0.26, {scaleY: 1})
		.from('#slantV', 0.56, {scaleX: 1})
		.from('#slantV', 0.43, {scaleY: 0, delay: 1.8})
		.from('#slantV', 0.33, {scaleX: 0, y: 20})
		st9

.set('#slantV2', {scale: 0, autoAlpha: 1, transformOrigin: 'center bottom'})
		.fromTo('#slantV2', 1, {y: 0}, {y: 0,visibility:'visible' ,})
		.from('#slantV2', 0.26, {scaleY: 1})
		.from('#slantV2', 0.56, {scaleX: 1})
		.from('#slantV2', 0.43, {scaleY: 0, delay: 0.8})
		.from('#slantV2', 0.33, {scaleX:0, y: 20})
	
	st10
  .to("button", 0, {scaleY: 0.2, transformOrigin:'50% 50%'}, 2.6)
		.to("button", 1.58, {scaleY: 1,visibility:'visible' ,ease: Elastic.easeOut.config(1, 0.1)});
		st11
	.to('#XMLID', 0.76, {rotation: -90, ease: Elastic.easeOut.config(1, 0.5),transformOrigin:'50% 50%',delay: 0.39})
		
		.to("#XMLID", 0.55, {rotation: -45, ease: Elastic.easeOut.config(1, 0.5),delay: 0.16})
		.to('#XMLID', 0.46, {rotation: 0, ease: Elastic.easeOut.config(1, 0.5),delay: 0.16})
		
	st12
		.to('p', 4.0, {scaleY: 0, scaleX: 1.1, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 0.3),visibility:'visible'})
		.from('p', 0.46, {scaleY: 0, transformOrigin:'50% 100%', ease: Elastic.easeOut.config(1, 1), delay: 0.1});
	
});

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
body {
    background: #222;
    overflow: hidden;
    color: #fff;
    font-family: 'Ubuntu';
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 2.3em;
    line-height: 2;
    font-weight: 600;
    text-rendering: optimizeLegibility;
    text-align: center;
}
svg {
    position: relative;
    transform: translate(-50%, -50%);
    transform: scale(0.8);
}
#topS {
    fill: #01579B;
}
#slantS2 {
    fill: #29B6F6;
}
#slantS {
    fill: #1976D2;
}
#middleS {
    fill: #0D47A1;
}
#slantS3 {
    fill: #42A5F5;
}
#topV {
    fill: #AD1457;
}
#slantV {
    fill: #E91E63;
}
#slantV2 {
    fill: #C2185B;
}
li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: fade(white, 15%);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
li:nth-child(1) {
    left: 10%;
}
li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 2s;
    animation-duration: 17s;
}
li:nth-child(3) {
    left: 25%;
    animation-delay: 4s;
}
li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-duration: 22s;
    background-color: fade(white, 25%);
}
li:nth-child(5) {
    left: 70%;
}
li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    animation-delay: 3s;
    background-color: fade(white, 20%);
}
li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    animation-delay: 7s;
}
li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    animation-delay: 15s;
    animation-duration: 40s;
}
li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    animation-delay: 2s;
    animation-duration: 40s;
    background-color: fade(white, 30%);
}
li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    animation-delay: 11s;
}
@-webkit-keyframes square {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-700px) rotate(600deg);
    }
}
@keyframes square {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-700px) rotate(600deg);
    }
}
#snow {
    background: none;
    font-family: Androgyne;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-moz-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 400px 1000px, 200px 400px, 100px 300px;
    }
}
@-webkit-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-ms-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
#snow {
    background: none;
    font-family: Androgyne;
    background-image: url("http://www.wearewebstars.dk/codepen/img/s1.png"), url("http://www.wearewebstars.dk/codepen/img//s2.png"), url("http://www.wearewebstars.dk/codepen/img//s3.png");
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-moz-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 400px 1000px, 200px 400px, 100px 300px;
    }
}
@-webkit-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-ms-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
/*
 * Animation module with all animation code
 */

.anim-text-flow,
.anim-text-flow-hover:hover {
    /*
   * Animation variables
   */
    /*
   * Elements settings
   */
    /*
   * Keyframe loop
   */
    /*
   * Element animation delay loop
   */
}
.anim-text-flow span,
.anim-text-flow-hover:hover span {
    animation-name: anim-text-flow-keys;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
@keyframes anim-text-flow-keys {
    0% {
        color: #a9d65c;
    }
    5% {
        color: #605cd6;
    }
    10% {
        color: #835cd6;
    }
    15% {
        color: #5ccad6;
    }
    20% {
        color: #68d65c;
    }
    25% {
        color: #5c78d6;
    }
    30% {
        color: #cad65c;
    }
    35% {
        color: #d6c65c;
    }
    40% {
        color: #d6645c;
    }
    45% {
        color: #5cd685;
    }
    50% {
        color: #c45cd6;
    }
    55% {
        color: #5cd6ab;
    }
    60% {
        color: #d65cce;
    }
    65% {
        color: #5cccd6;
    }
    70% {
        color: #d6c65c;
    }
    75% {
        color: #5cd689;
    }
    80% {
        color: #ba5cd6;
    }
    85% {
        color: #5cd6b6;
    }
    90% {
        color: #5c74d6;
    }
    95% {
        color: #5c70d6;
    }
    100% {
        color: #5cd2d6;
    }
}
.anim-text-flow span:nth-of-type(1),
.anim-text-flow-hover:hover span:nth-of-type(1) {
    animation-delay: -19.8s;
}
.anim-text-flow span:nth-of-type(2),
.anim-text-flow-hover:hover span:nth-of-type(2) {
    animation-delay: -19.6s;
}
.anim-text-flow span:nth-of-type(3),
.anim-text-flow-hover:hover span:nth-of-type(3) {
    animation-delay: -19.4s;
}
.anim-text-flow span:nth-of-type(4),
.anim-text-flow-hover:hover span:nth-of-type(4) {
    animation-delay: -19.2s;
}
.anim-text-flow span:nth-of-type(5),
.anim-text-flow-hover:hover span:nth-of-type(5) {
    animation-delay: -19s;
}
.anim-text-flow span:nth-of-type(6),
.anim-text-flow-hover:hover span:nth-of-type(6) {
    animation-delay: -18.8s;
}
.anim-text-flow span:nth-of-type(7),
.anim-text-flow-hover:hover span:nth-of-type(7) {
    animation-delay: -18.6s;
}
.anim-text-flow span:nth-of-type(8),
.anim-text-flow-hover:hover span:nth-of-type(8) {
    animation-delay: -18.4s;
}
.anim-text-flow span:nth-of-type(9),
.anim-text-flow-hover:hover span:nth-of-type(9) {
    animation-delay: -18.2s;
}
.anim-text-flow span:nth-of-type(10),
.anim-text-flow-hover:hover span:nth-of-type(10) {
    animation-delay: -18s;
}
.anim-text-flow span:nth-of-type(11),
.anim-text-flow-hover:hover span:nth-of-type(11) {
    animation-delay: -17.8s;
}
.anim-text-flow span:nth-of-type(12),
.anim-text-flow-hover:hover span:nth-of-type(12) {
    animation-delay: -17.6s;
}
.anim-text-flow span:nth-of-type(13),
.anim-text-flow-hover:hover span:nth-of-type(13) {
    animation-delay: -17.4s;
}
.anim-text-flow span:nth-of-type(14),
.anim-text-flow-hover:hover span:nth-of-type(14) {
    animation-delay: -17.2s;
}
.anim-text-flow span:nth-of-type(15),
.anim-text-flow-hover:hover span:nth-of-type(15) {
    animation-delay: -17s;
}
.anim-text-flow span:nth-of-type(16),
.anim-text-flow-hover:hover span:nth-of-type(16) {
    animation-delay: -16.8s;
}
.anim-text-flow span:nth-of-type(17),
.anim-text-flow-hover:hover span:nth-of-type(17) {
    animation-delay: -16.6s;
}
.anim-text-flow span:nth-of-type(18),
.anim-text-flow-hover:hover span:nth-of-type(18) {
    animation-delay: -16.4s;
}
.anim-text-flow span:nth-of-type(19),
.anim-text-flow-hover:hover span:nth-of-type(19) {
    animation-delay: -16.2s;
}
.anim-text-flow span:nth-of-type(20),
.anim-text-flow-hover:hover span:nth-of-type(20) {
    animation-delay: -16s;
}
.anim-text-flow span:nth-of-type(21),
.anim-text-flow-hover:hover span:nth-of-type(21) {
    animation-delay: -15.8s;
}
.anim-text-flow span:nth-of-type(22),
.anim-text-flow-hover:hover span:nth-of-type(22) {
    animation-delay: -15.6s;
}
.anim-text-flow span:nth-of-type(23),
.anim-text-flow-hover:hover span:nth-of-type(23) {
    animation-delay: -15.4s;
}
.anim-text-flow span:nth-of-type(24),
.anim-text-flow-hover:hover span:nth-of-type(24) {
    animation-delay: -15.2s;
}
.anim-text-flow span:nth-of-type(25),
.anim-text-flow-hover:hover span:nth-of-type(25) {
    animation-delay: -15s;
}
.anim-text-flow span:nth-of-type(26),
.anim-text-flow-hover:hover span:nth-of-type(26) {
    animation-delay: -14.8s;
}
.anim-text-flow span:nth-of-type(27),
.anim-text-flow-hover:hover span:nth-of-type(27) {
    animation-delay: -14.6s;
}
.anim-text-flow span:nth-of-type(28),
.anim-text-flow-hover:hover span:nth-of-type(28) {
    animation-delay: -14.4s;
}
.anim-text-flow span:nth-of-type(29),
.anim-text-flow-hover:hover span:nth-of-type(29) {
    animation-delay: -14.2s;
}
.anim-text-flow span:nth-of-type(30),
.anim-text-flow-hover:hover span:nth-of-type(30) {
    animation-delay: -14s;
}
.anim-text-flow span:nth-of-type(31),
.anim-text-flow-hover:hover span:nth-of-type(31) {
    animation-delay: -13.8s;
}
.anim-text-flow span:nth-of-type(32),
.anim-text-flow-hover:hover span:nth-of-type(32) {
    animation-delay: -13.6s;
}
.anim-text-flow span:nth-of-type(33),
.anim-text-flow-hover:hover span:nth-of-type(33) {
    animation-delay: -13.4s;
}
.anim-text-flow span:nth-of-type(34),
.anim-text-flow-hover:hover span:nth-of-type(34) {
    animation-delay: -13.2s;
}
.anim-text-flow span:nth-of-type(35),
.anim-text-flow-hover:hover span:nth-of-type(35) {
    animation-delay: -13s;
}
.anim-text-flow span:nth-of-type(36),
.anim-text-flow-hover:hover span:nth-of-type(36) {
    animation-delay: -12.8s;
}
.anim-text-flow span:nth-of-type(37),
.anim-text-flow-hover:hover span:nth-of-type(37) {
    animation-delay: -12.6s;
}
.anim-text-flow span:nth-of-type(38),
.anim-text-flow-hover:hover span:nth-of-type(38) {
    animation-delay: -12.4s;
}
.anim-text-flow span:nth-of-type(39),
.anim-text-flow-hover:hover span:nth-of-type(39) {
    animation-delay: -12.2s;
}
.anim-text-flow span:nth-of-type(40),
.anim-text-flow-hover:hover span:nth-of-type(40) {
    animation-delay: -12s;
}
.anim-text-flow span:nth-of-type(41),
.anim-text-flow-hover:hover span:nth-of-type(41) {
    animation-delay: -11.8s;
}
.anim-text-flow span:nth-of-type(42),
.anim-text-flow-hover:hover span:nth-of-type(42) {
    animation-delay: -11.6s;
}
.anim-text-flow span:nth-of-type(43),
.anim-text-flow-hover:hover span:nth-of-type(43) {
    animation-delay: -11.4s;
}
.anim-text-flow span:nth-of-type(44),
.anim-text-flow-hover:hover span:nth-of-type(44) {
    animation-delay: -11.2s;
}
.anim-text-flow span:nth-of-type(45),
.anim-text-flow-hover:hover span:nth-of-type(45) {
    animation-delay: -11s;
}
.anim-text-flow span:nth-of-type(46),
.anim-text-flow-hover:hover span:nth-of-type(46) {
    animation-delay: -10.8s;
}
.anim-text-flow span:nth-of-type(47),
.anim-text-flow-hover:hover span:nth-of-type(47) {
    animation-delay: -10.6s;
}
.anim-text-flow span:nth-of-type(48),
.anim-text-flow-hover:hover span:nth-of-type(48) {
    animation-delay: -10.4s;
}
.anim-text-flow span:nth-of-type(49),
.anim-text-flow-hover:hover span:nth-of-type(49) {
    animation-delay: -10.2s;
}
.anim-text-flow span:nth-of-type(50),
.anim-text-flow-hover:hover span:nth-of-type(50) {
    animation-delay: -10s;
}
.anim-text-flow span:nth-of-type(51),
.anim-text-flow-hover:hover span:nth-of-type(51) {
    animation-delay: -9.8s;
}
.anim-text-flow span:nth-of-type(52),
.anim-text-flow-hover:hover span:nth-of-type(52) {
    animation-delay: -9.6s;
}
.anim-text-flow span:nth-of-type(53),
.anim-text-flow-hover:hover span:nth-of-type(53) {
    animation-delay: -9.4s;
}
.anim-text-flow span:nth-of-type(54),
.anim-text-flow-hover:hover span:nth-of-type(54) {
    animation-delay: -9.2s;
}
.anim-text-flow span:nth-of-type(55),
.anim-text-flow-hover:hover span:nth-of-type(55) {
    animation-delay: -9s;
}
.anim-text-flow span:nth-of-type(56),
.anim-text-flow-hover:hover span:nth-of-type(56) {
    animation-delay: -8.8s;
}
.anim-text-flow span:nth-of-type(57),
.anim-text-flow-hover:hover span:nth-of-type(57) {
    animation-delay: -8.6s;
}
.anim-text-flow span:nth-of-type(58),
.anim-text-flow-hover:hover span:nth-of-type(58) {
    animation-delay: -8.4s;
}
.anim-text-flow span:nth-of-type(59),
.anim-text-flow-hover:hover span:nth-of-type(59) {
    animation-delay: -8.2s;
}
.anim-text-flow span:nth-of-type(60),
.anim-text-flow-hover:hover span:nth-of-type(60) {
    animation-delay: -8s;
}
.anim-text-flow span:nth-of-type(61),
.anim-text-flow-hover:hover span:nth-of-type(61) {
    animation-delay: -7.8s;
}
.anim-text-flow span:nth-of-type(62),
.anim-text-flow-hover:hover span:nth-of-type(62) {
    animation-delay: -7.6s;
}
.anim-text-flow span:nth-of-type(63),
.anim-text-flow-hover:hover span:nth-of-type(63) {
    animation-delay: -7.4s;
}
.anim-text-flow span:nth-of-type(64),
.anim-text-flow-hover:hover span:nth-of-type(64) {
    animation-delay: -7.2s;
}
.anim-text-flow span:nth-of-type(65),
.anim-text-flow-hover:hover span:nth-of-type(65) {
    animation-delay: -7s;
}
.anim-text-flow span:nth-of-type(66),
.anim-text-flow-hover:hover span:nth-of-type(66) {
    animation-delay: -6.8s;
}
.anim-text-flow span:nth-of-type(67),
.anim-text-flow-hover:hover span:nth-of-type(67) {
    animation-delay: -6.6s;
}
.anim-text-flow span:nth-of-type(68),
.anim-text-flow-hover:hover span:nth-of-type(68) {
    animation-delay: -6.4s;
}
.anim-text-flow span:nth-of-type(69),
.anim-text-flow-hover:hover span:nth-of-type(69) {
    animation-delay: -6.2s;
}
.anim-text-flow span:nth-of-type(70),
.anim-text-flow-hover:hover span:nth-of-type(70) {
    animation-delay: -6s;
}
.anim-text-flow span:nth-of-type(71),
.anim-text-flow-hover:hover span:nth-of-type(71) {
    animation-delay: -5.8s;
}
.anim-text-flow span:nth-of-type(72),
.anim-text-flow-hover:hover span:nth-of-type(72) {
    animation-delay: -5.6s;
}
.anim-text-flow span:nth-of-type(73),
.anim-text-flow-hover:hover span:nth-of-type(73) {
    animation-delay: -5.4s;
}
.anim-text-flow span:nth-of-type(74),
.anim-text-flow-hover:hover span:nth-of-type(74) {
    animation-delay: -5.2s;
}
.anim-text-flow span:nth-of-type(75),
.anim-text-flow-hover:hover span:nth-of-type(75) {
    animation-delay: -5s;
}
.anim-text-flow span:nth-of-type(76),
.anim-text-flow-hover:hover span:nth-of-type(76) {
    animation-delay: -4.8s;
}
.anim-text-flow span:nth-of-type(77),
.anim-text-flow-hover:hover span:nth-of-type(77) {
    animation-delay: -4.6s;
}
.anim-text-flow span:nth-of-type(78),
.anim-text-flow-hover:hover span:nth-of-type(78) {
    animation-delay: -4.4s;
}
.anim-text-flow span:nth-of-type(79),
.anim-text-flow-hover:hover span:nth-of-type(79) {
    animation-delay: -4.2s;
}
.anim-text-flow span:nth-of-type(80),
.anim-text-flow-hover:hover span:nth-of-type(80) {
    animation-delay: -4s;
}
.anim-text-flow span:nth-of-type(81),
.anim-text-flow-hover:hover span:nth-of-type(81) {
    animation-delay: -3.8s;
}
.anim-text-flow span:nth-of-type(82),
.anim-text-flow-hover:hover span:nth-of-type(82) {
    animation-delay: -3.6s;
}
.anim-text-flow span:nth-of-type(83),
.anim-text-flow-hover:hover span:nth-of-type(83) {
    animation-delay: -3.4s;
}
.anim-text-flow span:nth-of-type(84),
.anim-text-flow-hover:hover span:nth-of-type(84) {
    animation-delay: -3.2s;
}
.anim-text-flow span:nth-of-type(85),
.anim-text-flow-hover:hover span:nth-of-type(85) {
    animation-delay: -3s;
}
.anim-text-flow span:nth-of-type(86),
.anim-text-flow-hover:hover span:nth-of-type(86) {
    animation-delay: -2.8s;
}
.anim-text-flow span:nth-of-type(87),
.anim-text-flow-hover:hover span:nth-of-type(87) {
    animation-delay: -2.6s;
}
.anim-text-flow span:nth-of-type(88),
.anim-text-flow-hover:hover span:nth-of-type(88) {
    animation-delay: -2.4s;
}
.anim-text-flow span:nth-of-type(89),
.anim-text-flow-hover:hover span:nth-of-type(89) {
    animation-delay: -2.2s;
}
.anim-text-flow span:nth-of-type(90),
.anim-text-flow-hover:hover span:nth-of-type(90) {
    animation-delay: -2s;
}
.anim-text-flow span:nth-of-type(91),
.anim-text-flow-hover:hover span:nth-of-type(91) {
    animation-delay: -1.8s;
}
.anim-text-flow span:nth-of-type(92),
.anim-text-flow-hover:hover span:nth-of-type(92) {
    animation-delay: -1.6s;
}
.anim-text-flow span:nth-of-type(93),
.anim-text-flow-hover:hover span:nth-of-type(93) {
    animation-delay: -1.4s;
}
.anim-text-flow span:nth-of-type(94),
.anim-text-flow-hover:hover span:nth-of-type(94) {
    animation-delay: -1.2s;
}
.anim-text-flow span:nth-of-type(95),
.anim-text-flow-hover:hover span:nth-of-type(95) {
    animation-delay: -1s;
}
.anim-text-flow span:nth-of-type(96),
.anim-text-flow-hover:hover span:nth-of-type(96) {
    animation-delay: -0.8s;
}
.anim-text-flow span:nth-of-type(97),
.anim-text-flow-hover:hover span:nth-of-type(97) {
    animation-delay: -0.6s;
}
.anim-text-flow span:nth-of-type(98),
.anim-text-flow-hover:hover span:nth-of-type(98) {
    animation-delay: -0.4s;
}
.anim-text-flow span:nth-of-type(99),
.anim-text-flow-hover:hover span:nth-of-type(99) {
    animation-delay: -0.2s;
}
.anim-text-flow span:nth-of-type(100),
.anim-text-flow-hover:hover span:nth-of-type(100) {
    animation-delay: 0s;
}
.container {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
.txt {
    display: block;
}
button {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    height: 30px;
    width: 200px;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.4em;
    letter-spacing: 0.2em;
    overflow: hidden;
    background-image: linear-gradient(to right, #E040FB, #00BCD4);
    color: white;
}

HTML

</g>
</svg>
<div id=snow></div>
<div class="container">
    <span class="txt anim-text-flow">SREE VISION '16 </span>
</div>
<div class="cont">
    <button type="button">
        explore

</button>

</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>

带很棒的渐变色标题和一个抖动的按钮动画。

gsap, landing, template

编辑器支持Emmet

快捷键

带很棒的渐变色标题和一个抖动的按钮动画。

gsap, landing, template

使用SVG和CSS3制作的纸飞机飘摇页面背景动画

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：