-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdemo3.html
129 lines (95 loc) · 2.51 KB
/
demo3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>demo3</title>
<style>
body{
background-color:#10ABFD;
width:100%;
height:100%;
overflow:hidden;
}
svg{
position:absolute;
width:80%;
top:20%;
left:10%;
visibility:hidden;
}
#container{
position:absolute;
width:100%;
height:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body translate="no" >
<div id="container">
<svg class="arches-svg-node" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
viewBox="0 0 552.7 62.1">
<path class="arches" fill="none" stroke="#ecf0f1" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M505,55c0-27.6-22.4-50-50-50s-50,22.4-50,50c0-27.6-22.4-50-50-50s-50,22.4-50,50c0-27.6-22.4-50-50-50s-50,22.4-50,50
c0-27.6-22.4-50-50-50s-50,22.4-50,50c0-27.6-22.4-50-50-50S5,27.4,5,55"/>
<path class="splash-lines" fill="none" stroke="#ecf0f1" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" d="
M549.7,46.6l-21.8,12.6 M531.9,25.8l-12.6,21.8 M504.2,18.3v25.1 M476.4,25.8L489,47.6 M458.7,46.6l21.8,12.6"/>
</svg>
</div>
<script src='js/TweenMax.min.js'></script>
<script src='js/DrawSVGPlugin.min.js'></script>
<script src='js/jquery.min.js'></script>
<script>
var container = document.getElementById('container');
var arches = document.getElementsByClassName('arches');
var archesSVGNode = document.querySelector('.arches-svg-node');
var splashLines = document.getElementsByClassName('splash-lines');
TweenMax.set(splashLines, {
drawSVG:'40 60'
})
TweenMax.set('svg', {
visibility:'visible'
})
// console.log(splashLines.getTotalLength())
var cloned = archesSVGNode.cloneNode(true); //克隆了一个path
container.appendChild(cloned)
TweenMax.set(cloned, {
transformOrigin:'50% 100%',
rotationX:180,
y:'+=20',
alpha:0.08
})
TweenMax.set(container, {
position:'absolute',
left:'50%',
xPercent:-50,
top:'50%',
yPercent:-50
})
TweenMax.set(arches, {
drawSVG:'100% 100%'
})
var tl = new TimelineMax({repeat:-1, yoyo:false, repeatDelay:1});
// tl.timeScale(1);
tl.to(arches, 0.3, {
drawSVG:'100% 93%',
ease:Linear.easeNone
})
.to(arches, 2, {
drawSVG:'0% -5%',
ease:Linear.easeNone
})
.to(splashLines, 0.8, {
drawSVG:'0% 1%',
ease:Power2.easeOut,
alpha:1
}, '-=0.2')
.to(splashLines, 0.8, {
alpha:0
}, '-=0.65')
</script>
</body>
</html>