gsap实现文字字母逐个生长动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现文字字母逐个生长动画效果代码,相信自己
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #001233;
}
.support {
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
}
.support a {
margin: 0 10px;
color: #fff;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
}
.support a:hover {
transform: scale(1.1);
}
</style>
</head>
<body >
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29166 132.29167">
<defs>
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="0" flood-color="#000" flood-opacity=".5" />
</filter>
</defs>
<defs id="morphs">
<g id="believe_in">
<p.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0