前端之家收集整理的这篇文章主要介绍了
基于jquery和svg实现超炫酷的动画特效,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图:
实现的代码。
HTML代码:
" xmlns:xlink="
"
version="1.1" id="ihtlogo" x="0" y="0" view
Box="0 0 308.8 152.1" xml:space="preserve"
enable-background="new 0 0 308.8 152.1">
logo
{
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;
}