-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdemo4.html
72 lines (54 loc) · 2.4 KB
/
demo4.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
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
body {
background-color:black;
text-align:center;
color: #777;
}
#bbb{opacity: 0.3}
#aaa{opacity: 0.3}
#ccc{opacity: 0.3}
#bbb2{opacity: 0}
#aaa2{opacity: 0}
#ccc2{opacity: 0}
</style>
</head>
<body translate="no" >
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="600px" height="600px" viewBox="0 0 570 150" xml:space="preserve">
<polygon id="aaa" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" points="361.699,82 405,25 448.301,82 "/>
<polygon id="aaa2" fill="none" stroke="blue" stroke-width="2" stroke-miterlimit="10" points="361.699,82 405,25 448.301,82 "/>
<polygon id="bbb" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" points="320,148 359.447,98.549 413.5,98 454.553,98.549
490.979,145.898 "/>
<polygon id="bbb2" fill="none" stroke="blue" stroke-width="2" stroke-miterlimit="10" points="320,148 359.447,98.549 413.5,98 454.553,98.549
490.979,145.898 "/>
<polygon id="ccc" fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10" points="254,238 312,167.289 500,167.289 561,238 "/>
<polygon id="ccc2" fill="none" stroke="blue" stroke-width="2" stroke-miterlimit="10" points="254,238 312,167.289 500,167.289 561,238 "/>
</svg>
<script src='js/TweenMax.min.js'></script>
<script src='js/DrawSVGPlugin.min.js'></script>
<script src='js/jquery.min.js'></script>
<script>
var star1 = $('#aaa'),
star2 = $('#bbb'),
star3 = $('#ccc'),
star11 = $('#aaa2'),
star22 = $('#bbb2'),
star33 = $('#ccc2')
container = $('#Layer_1')
tl = new TimelineMax({})
tl.set(container, {position:'absolute',left:'40%',xPercent:-50,top:'40%',yPercent:-50})
tl1 = new TimelineMax({repeat:-1,delay:1})
tl1.fromTo(star11, 0.7, {drawSVG: '100% 100%'}, {opacity:1, drawSVG: '100% 0%'})
.fromTo(star22, 0.5, {drawSVG: '100% 100%'}, {opacity:1, drawSVG: '100% 0%'}, '+=0.5')
.fromTo(star33, 0.5, {drawSVG: '100% 100%'}, {opacity:1, drawSVG: '100% 0%'}, '+=1')
.fromTo(star11, 0.7, {drawSVG: '100% 0%'}, {opacity:1, drawSVG: '100% 100%'},'+=1')
.fromTo(star22, 0.5, {drawSVG: '100% 0%'}, {opacity:1, drawSVG: '100% 100%'}, '+=0.5')
.fromTo(star33, 0.5, {drawSVG: '100% 0%'}, {opacity:1, drawSVG: '100% 100%'}, '+=1')
</script>
</body>
</html>