TweenMax+Rx实现鲜花签名动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+Rx实现鲜花签名动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
user-select: none;
color: #111;
font-family: serif;
}
body {
background-color: #f0f0f0;
cursor: pointer;
background-size: cover;
background-position: center center;
background-image: url(//repo.bfw.wiki/bfwrepo/image/636dea74def17.png);
}
#app {
width: 100%;
height: 100%;
}
#stage {
backface-visibility: visible;
}
#download-button {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
display: inline-block;
margin: 10px;
background-color: #f0f0f0;
color: #303030;
border-radius: 4px;
cursor: pointer;
border-bottom: solid 3px #f0f0f0;
}
#download-button:hover {
border-bottom: solid 3px #d7d7d7;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<svg id="stage" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g id="branchGroup"></g>
<g id="thornGroup"></g>
<g id="leafGroup"></g>
<g id="flowerGroup"></g>
</svg>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Rx.5.0.1.js"></script>
<script>
&quo.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0