欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-19 18:44:21
...
今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图:

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

实现的代码。

html代码:

复制代码 代码如下:


http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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">









http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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代码:

复制代码 代码如下:

#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;
}
相关标签: jquery svg