微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

基于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"> <polygon points="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/> <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/> " 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"> v5.6c0.3 0.1 0.9 0.2 1.1 0.2C32 17.6 32.2 17.8 32.2 18zM28.8 13.9c-0.9 0-1.7 0.1-2.3 0.2 -0.6 0.1-1.1 0.3-1.5 0.4 -0.4 0.2-0.7 0.4-0.9 0.7s-0.3 0.5-0.3 0.8c0 0.3 0 0.5 0.1 0.8s0.2 0.4 0.4 0.5c0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.5 0.1 0.7 0.1 0.3 0 0.7 0 0.9-0.1 0.3-0.1 0.6-0.2 0.8-0.3 0.3-0.1 0.5-0.3 0.7-0.5 0.2-0.2 0.5-0.4 0.7-0.6V13.9z"/>

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐