JSDM

HTML

8
 
1
<div class="content">   
2
  <div class="rotate">
3
    <span class="triangle base"></span>
4
    <span class="triangle no1"></span>
5
    <span class="triangle no2"></span>
6
    <span class="triangle no3"></span>
7
  </div>
8
</div>

CSS

x
 
1
body {
2
  padding:0;
3
  margin:0; 
4
  background-color: #2a4e66;
5
  overflow: hidden;
6
}
7
8
.content {
9
  width:100%;
10
  height:100%;
11
  top:0;
12
  right:0;
13
  bottom:0;
14
  left:0;
15
  position:absolute;
16
}
17
18
.rotate {
19
  position: absolute;
20
  top: 50%;
21
  left: 50%;
22
  margin: -93px 0 0 -93px;
23
  background: transparent;
24
  width: 186px;
25
  height: 186px;
26
  border-radius: 50%;
27
  z-index: 20;
28
}
29
30
.rotate:after {
31
  content: '';  
32
  position: absolute;
33
  box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;
34
  width: 186px;
35
  height: 186px;
36
  border-radius: 50%;
37
  z-index: 10;
38
}
39
40
span.triangle.base {
41
  position: absolute;
42
  width: 0; 
43
  height: 0;
44
  margin: 46px 0 0 13px;
45
  border-left: 80px solid transparent;
46
  border-right: 80px solid transparent;       
47
  border-top: 140px solid #eeeeee;
48
  transform-origin: 50% 50%;
49
  z-index: 20;
50
}
51
52
span.triangle.no1 {
53
  position: absolute;
54
  margin: 46px 0 0 13px;
55
  width: 0; 
56
  height: 0; 
57
  border-left: 80px solid transparent;
58
  border-right: 80px solid transparent;       
59
  border-bottom: 140px solid #eeeeee;
60
  transform-origin: 0 100%;
61
  z-index: 20;
62
}
63
64
span.triangle.no2 {
65
  position: absolute;
66
  margin: 46px 0 0 13px;
67
  width: 0; 
68
  height: 0; 
69
  border-left: 80px solid transparent;
70
  border-right: 80px solid transparent;       
71
  border-bottom: 140px solid #eeeeee;
72
  transform-origin: 100% 100%;
73
  z-index: 20;
74
}
75
76
span.triangle.no3 {
77
  position: absolute;
78
  margin: 46px 0 0 13px;
79
  width: 0; 
80
  height: 0; 
81
  border-left: 80px solid transparent;
82
  border-right: 80px solid transparent;       
83
  border-bottom: 140px solid #eeeeee;
84
  transform-origin: 50% 100%;
85
  z-index: 20;
86
}
87
88
/* Animation */
89
90
.rotate {
91
  -webkit-animation: rotateTriangle 3s linear infinite;
92
  animation: rotateTriangle 3s linear infinite;
93
}
94
95
@-webkit-keyframes rotateTriangle {
96
  from { -webkit-transform: rotate(0deg); }
97
  to { -webkit-transform: rotate(60deg); }
98
}
99
@keyframes rotateTriangle {
100
  from { transform: rotate(0deg); }
101
  to { transform: rotate(60deg); }
102
}
103
104
.rotate:after {
105
  -webkit-animation: glowAnimation 3s ease infinite;
106
  animation: glowAnimation 3s ease infinite;
107
}
108
109
@-webkit-keyframes glowAnimation {    
110
  0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
111
  10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
112
  100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
113
}
114
@keyframes glowAnimation {
115
  0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
116
  10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
117
  100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
118
}
119
120
span.triangle.base {
121
  -webkit-animation: scaleTriangleBase 3s linear infinite;
122
  animation: scaleTriangleBase 3s linear infinite;
123
}
124
125
@-webkit-keyframes scaleTriangleBase {
126
  from { -webkit-transform: translate(0px,-11px) scale(0.5); }
127
  to { -webkit-transform: translate(0px,0px) scale(1); }
128
  }
129
@keyframes scaleTriangleBase {
130
  from { transform: translate(0px,-11px) scale(0.5); }
131
  to { transform: translate(0px,0px) scale(1); }
132
}
133
134
span.triangle.no1 {
135
  -webkit-animation: scaleTriangleOne 3s linear infinite;
136
  animation: scaleTriangleOne 3s linear infinite;
137
}
138
139
@-webkit-keyframes scaleTriangleOne {
140
  from { -webkit-transform: translate(0px,-46px) scale(0.5); }
141
  to { -webkit-transform: translate(-80px,0px) scale(0); }
142
}
143
@keyframes scaleTriangleOne {
144
  from { transform: translate(0px,-46px) scale(0.5); }
145
  to { transform: translate(-80px,0px) scale(0); }
146
}
147
148
span.triangle.no2 {
149
  -webkit-animation: scaleTriangleTwo 3s linear infinite;
150
  animation: scaleTriangleTwo 3s linear infinite;
151
}
152
153
@-webkit-keyframes scaleTriangleTwo {
154
  from { -webkit-transform: translate(0px,-46px) scale(0.5); }
155
  to { -webkit-transform: translate(80px,0px) scale(0); }
156
}
157
@keyframes scaleTriangleTwo {
158
  from { transform: translate(0px,-46px) scale(0.5); }
159
  to { transform: translate(80px,0px) scale(0); }
160
}
161
162
span.triangle.no3 {
163
  -webkit-animation: scaleTriangleThree 3s linear infinite;
164
  animation: scaleTriangleThree 3s linear infinite;
165
}
166
167
@-webkit-keyframes scaleTriangleThree {
168
  from { -webkit-transform: translate(0px,-116px) scale(0.5); }
169
  to { -webkit-transform: translate(0px,-280px) scale(0); }
170
}
171
@keyframes scaleTriangleThree {
172
  from { transform: translate(0px,-116px) scale(0.5); }
173
  to { transform: translate(0px,-280px) scale(0); }
174
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

1
 
1
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................