基于jquery和svg实现超炫酷的动画特效_jquery

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图：

实现的代码。

html代码：

version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
enable-background="new 0 0 308.8 152.1">










version="1.1" id="ihtText" x="0" y="0" viewbox="0 0 148.2 23" enable-background="new 0 0 148.2 23"
xml:space="preserve">

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;
}