<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TweenMax.js + SVG 励志动画 - 不断前行的人</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
body {
background-color: #efefef;
background: -webkit-radial-gradient(rgb(255, 255, 255), rgb(200, 200, 200));
background: radial-gradient(rgb(255, 255, 255), rgb(200, 200, 200));
}
svg {
opacity: 0;
overflow: visible;
position: absolute;
left: 50%;
top: 53%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#text {
position: absolute;
left: 50%;
top: 20px;
width: 100%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
font-family: 'Oswald', arial;
color: #ED002E;
font-size: 50px;
font-size: 5.5vw;
text-align: center;
white-space: nowrap;
}
#text span {
color: #444;
font-size: 30px;
font-size: 3.5vw;
}
#links {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
font-size: 13px;
font-family: tahoma;
color: #000;
}
#links a {
text-decoration: none;
font-size: 2.3em;
color: #000;
}
#twitter {
position: absolute;
bottom: 20px;
right: 30px;
}
#pens {
position: absolute;
bottom: 20px;
left: 30px;
}
#back {
position: absolute;
left: 50%;
top: 50%;
width: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: arial;
color: rgba(0, 0, 0, 0.1);
font-size: 50px;
font-size: 10vw;
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
<div id="text"><span>No Matter How Hard it is ,</span> Just Keep Going</div>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="325" height="325" viewBox="15 0 315 315">
<circle fill="white" cx="172" cy="165" r="150" stroke='rgba(255,255,255,.4)' stroke-width='30' />
<ellipse id="mSH" opacity='.2' cx="175" cy="313" rx="110" ry="10" />
<g id="B">
<g id="UB">
<g id="H">
<path d="M188.8.2c-9.1-.3-16.2 7.3-16.2 15.4 0 8.9 7.2 13.8 7.2 13.8s1.3 3.8 0 6.9c-2.1 4.8-6.6 11.1-6.6 11.1l17.6 8.9s-3.8-8.4-2.2-13.8c.8-2.9 4.7-3.5 6.9-3.1 3.8 3.7 7.7 5.5 9.1 4.6 1.9-1.2 4.9-18.4 4.5-26.8-.4-8.5-9.5-16.3-20.3-17z" />
<g fill='none' stroke='#fff' opacity='0.4'>
<path d="M191.1.3s4 4.4 4.9 17.9-.9 21-.9 21" />
<path d="M172.6 16.2s8.2 2.1 19.2 2.4c11.5.3 17.4-1.5 17.4-1.5" />
</g>
<g fill='none' stroke='#fff' opacity='0.7' stroke-linecap='round' stroke-width='3'>
<path class="st4" d="M181,7.1c-0.8,0.7-1.6,1.4-2.2,2.3" />
<path class="st4" d="M198.6,7.6c-4.1-2.8-9.3-4.3-14-2.6" />
</g>
</g>
<path d="M196.9 83.1c-1.6 8-2.9 14.6-2.9 14.6l-4.9 46.1-21.9-7.7 3.4-11c.7-3.7.9-8.5.4-12.3-4.272-29.697-8.373-41.774-5.7-52.182 2.043-6.93 9.2-17.518 9.2-17.518s3.7 1.4 6.6 2.2c3.5 1.2 8.3 2.9 8.3 2.9s10 21.9 7.5 34.9z" />
<path class="FB" d="M167.5 132.7c-9 18.6 6.4 27.6 10.6 27.6 6 0 11.8-9.2 12.3-24.1l-22.9-5.7v2.2z" />
</g>
<g id="FF">
<path d="M169.2 223.345c.1-.21-.4-2.11 1.4-20.466-1.9-15.51-4.6-39.88-1.2-52.86 2.9-12.66 16.7-15.83 19.1-1.588.4 11.183.4 15.51-2 35.66-4.6 23.313-9.7 39.243-9.8 40.09-.1.525-2.2 2.32-4.4 2.002-1.7.104-3.3-2.217-3.1-2.85z" />
<g class="F1">
<path d="M162.9 307.954s1.2-11.393.3-24.264c-.5-9.284-5.8-30.594-4.7-38.93 6.8-18.777 13.6-23.42 16.4-22.26 1.1.95 1.9 2.322 1.3 4.01-.1.106-3.8 23.632-6 40.3-2.3 18.04.7 41.144.7 41.144h-8z" />
<g class="F2">
<path d="M192.2 316.183s-25.4-16.985-28.8-14.242c-1.4 6.65-11.8 19.1-2.9 22.9 3.3 1.27 7-1.16 8.3-1.37 6.3-1.16 19.1 1.48 20.2 1.48 2.8 0 5.1-1.687 5.1-4.64 0-1.69-.8-3.27-1.9-4.116z" />
<path class="F3" d="M191.7 315.867s-1.5-.528-2.3-.528c-2.6 0-4.6 2.11-4.6 4.85 0 2.42 1.7 4.53 4.1 4.75 0 0 17 .95 17.3-2.64.3-3.38-7.5-2.85-14.5-6.44z" />
</g>
</g>
</g>
<path fill='#333' d="M191.1 49.9l-18.9-3.7c-.9-.1-1.2-1.1-.6-1.6l1.9-2.3c.2-.3.7-.4 1.1-.3l16.7 5.7c-.1-.1-.2 2.2-.2 2.2z" />
<g id="HF">
<path d="M179.9 111.275c.5-1.88 7.2-21.42 6.3-36.154 4.4-10.76 2-18.49.7-21.42-3.1-7-13.2-5.74-14.6 4.29-.5 3.66-1.5 10.87 2 19.33-2.6 17.24.7 31.87.9 33.96s4.1 1.988 4.7 0" />
<g class="H1">
<path d="M185 122.56c-.5-3.135-4.4-17.137-8.8-16.3-2.1.417-3.3 12.016-3.3 12.016 1.5 11.39 6.533 25.093 10.333 35.96l4.567-.852c.2 0-2.5-14.628-2.8-30.824z" />
<path class="H2" d="M186.87 152.17c-1 .11-2.9.774-4 .885-.6.11-2 4.318-2.8 7.308-.4 1.44-1 8.083-1 9.633l.4 6.312s1.5 5.315 1.8 5.98c.5 1.55 1.4.664 1.4.664s1.3 3.22 1.4 3.55c.3.67.8.89 1.3.78 2.3-.44-.1-5.09-.9-7.192.2-1.44-.3-4.872-.3-4.872s1 6.2 1.1 6.756c.1 1.77 2.1 4.87 2.4 5.87.1.995 1.6 1.327 2.4.44 1.7-1.88-1.8-6.53-1.8-6.53.4-2.216-.7-7.53-.7-7.53s1.5 9.52 2.2 11.736c.1.333 1.1 4.984 1.3 5.205.3.554 1 .554 1.5.333 2.2-1.33.7-6.866.2-7.862-.1-.33-.1-4.32-.7-7.75.15-4.882-.227-5.843-.8-7.64s.9 3.544 1.5 4.54c.04 4.22 2.277 7.61 4.355 6.67.8-.663.19-5.314-.555-8.552l-2.4-7.525c.2.33-6.2-11.3-7.3-11.19v-.028z"
/>
</g>
</g>
</g>
</svg>
<script src='js/TweenMax.min.js'></script>
<script>
var
Doc = document,
TwL = TweenLite,
E0 = Sine.easeInOut,
E1 = Sine.easeIn,
E2 = Sine.easeOut
B = Doc.getElementById('B'), UB = Doc.getElementById('UB'),
F = Doc.getElementById('FF'), H = Doc.getElementById('HF');
TwL.set('svg', {
opacity: 1
});
TwL.set(B, {
y: 10
});
TwL.set(UB, {
fill: '#151515',
transformOrigin: '50% 100%'
});
TwL.set(H, {
transformOrigin: '-5px 0px',
rotation: -10,
fill: '#454545'
});
TwL.set(F, {
transformOrigin: '55% 10px',
rotation: -37,
fill: '#DC0026'
});
TwL.set('#H', {
transformOrigin: '5px 50px',
fill: '#454545',
scale: 0.978,
rotation: -5
});
TwL.set('.H1', {
rotation: -20,
transformOrigin: '0px 5px',
y: -1
});
TwL.set('.H2', {
transformOrigin: '10% 0%',
rotation: -10,
y: -.7
});
TwL.set('.F1', {
transformOrigin: '21px 2px'
});
TwL.set('.F2', {
transformOrigin: '25px 0px'
});
TwL.set('.F3', {
transformOrigin: '4.2px 4.2px'
});
var F2 = F.cloneNode(true),
H2 = H.cloneNode(true);
F2.id = 'FB';
H2.id = 'HB';
B.insertBefore(H2, UB);
B.insertBefore(F2, UB);
TwL.set('.FB', {
fill: '#DC0026'
});
TwL.set('#FB', {
fill: '#A50018'
});
TwL.set('#HB', {
y: -3,
fill: '#333'
});
function M(p1, p2) {
var tl = new TimelineMax({
repeat: -1
})
.add("l1", 0).add("l2", .25).add("l3", .5).add("l4", .75).add("l5", 1)
.to(p1, .5, {
rotation: 27,
ease: E0
}, 'l1')
.to(p1, .25, {
rotation: -37,
ease: E1
}, 'l3')
.to(p1 + ' .F1', .25, {
rotation: 15,
ease: E0
}, 'l2')
.to(p1 + ' .F1', .25, {
rotation: 80,
ease: E1
}, 'l3')
.to(p1 + ' .F1', .25, {
rotation: 0,
ease: E2
}, 'l4')
.to
TweenMax.js+SVG实现不断前行的人动画效果源码.zip
版权申诉
49 浏览量
2022-11-01
00:09:10
上传
评论
收藏 474KB ZIP 举报
TweenMax.js+SVG实现不断前行的人动画效果源码.zip （9个子文件） 
132689837258691974 css 
font-awesome.min.css 26KB fonts fontawesome-webfont.eot 67KB fontawesome-webfont.woff 79KB
fontawesome-webfont.svg 348KB fontawesome-webfont.woff2 63KB fontawesome-webfont.ttf 135KB
index.html 9KB js jquery-1.11.1.min.js 94KB TweenMax.min.js 107KB资源评论
