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

前端之家收集整理的这篇文章主要介绍了基于jquery和svg实现超炫酷的动画特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

实现的代码

HTML代码

代码如下:
" xmlns:xlink="" 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"> " xmlns:xlink="" 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代码:

代码如下:
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; }

猜你在找的jQuery相关文章