今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图：
实现的代码。
html代码：
复制代码 代码如下:
<script src="jquery.js"></script>
<script src="TweenMax.min.js"></script>
<script><br> var tomato = $('#tomato'), bracketRight = $('.bracketRight'), bracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight'), tomatoLeaves = $('.tomatoLeaves'), letters = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $('#btnReverse'), tl;<br> tl = new TimelineMax();<br> tl.set([tomatoLeft], { xPercent: 23.6 });<br> tl.set([tomatoLeaves], { xPercent: 41 });<br> tl.set([tomato], {<br> xPercent: 2,<br> rotation: 13,<br> transformOrigin: 'center center'<br> });<br> tl.set(tomato, { yPercent: -200 });<br> tl.set(bracketRight, { xPercent: 200 });<br> tl.set(bracketLeft, { xPercent: -200 });<br> tl.to([<br> bracketRight,<br> bracketLeft<br> ], 0.3, {<br> xPercent: 0,<br> ease: Power4.easeOut<br> }, 0.5).to(tomato, 0.5, {<br> yPercent: 0,<br> ease: Bounce.easeOut<br> }).to(tomato, 0.2, {<br> rotation: 0,<br> xPercent: -4<br> }).to([<br> tomatoLeft,<br> tomatoLeaves<br> ], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {<br> rotation: 0,<br> xPercent: 0<br> }, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');<br> $btnPlay.click(function () {<br> tl.timeScale(1).seek(0);<br> });<br> $btnSlowMo.click(function () {<br> tl.timeScale(0.2).seek(0.5);<br> });<br> $btnReverse.click(function () {<br> tl.timeScale(1).seek('end').reverse();<br> });<br> //@ sourceURL=pen.js<br> </script>
css代码：
复制代码 代码如下:
#intro
{
height: 100vh;
width: 50%;
margin: 0 auto;
overflow: hidden;
}
#intro #ihtLogo
{
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
transform: translate(-50%, -70%);
}
#intro #ihtText
{
width: 100%;
position: absolute;
top: 50%;
width: 40%;
left: 50%;
transform: translate(-50%, 80%);
}
.buttons
{
position: absolute;
bottom: 20px;
left: 20px;
list-style: none;
margin: 0;
padding: 0;
right: 20px;
}
.button
{
float: left;
margin-right: 10px;
padding: 10px 15px;
border: 1px #ebebeb solid;
text-decoration: none;
color: #222222;
}
