├── img-one
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 01.jpg
    ├── 02.jpg
    ├── 03.jpg
    ├── 04.jpg
    ├── 05.jpg
    ├── 06.jpg
    ├── 开始.png
    └── 暂停.png
├── img-two
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 01.jpg
    ├── 02.jpg
    ├── 03.jpg
    ├── 04.jpg
    ├── 05.jpg
    ├── 06.jpg
    ├── 开始.png
    └── 暂停.png
├── mp3
    ├── 沉醉的青丝.mp3
    └── 白月光与朱砂痣.mp3
├── README.md
├── css
    ├── style1.css
    └── style2.css
├── index1.html
└── index2.html


/img-one/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/1.jpg


--------------------------------------------------------------------------------
/img-one/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/2.jpg


--------------------------------------------------------------------------------
/img-one/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/3.jpg


--------------------------------------------------------------------------------
/img-one/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/4.jpg


--------------------------------------------------------------------------------
/img-one/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/5.jpg


--------------------------------------------------------------------------------
/img-one/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/6.jpg


--------------------------------------------------------------------------------
/img-two/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/1.jpg


--------------------------------------------------------------------------------
/img-two/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/2.jpg


--------------------------------------------------------------------------------
/img-two/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/3.jpg


--------------------------------------------------------------------------------
/img-two/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/4.jpg


--------------------------------------------------------------------------------
/img-two/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/5.jpg


--------------------------------------------------------------------------------
/img-two/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/6.jpg


--------------------------------------------------------------------------------
/mp3/沉醉的青丝.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/mp3/沉醉的青丝.mp3


--------------------------------------------------------------------------------
/img-one/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/01.jpg


--------------------------------------------------------------------------------
/img-one/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/02.jpg


--------------------------------------------------------------------------------
/img-one/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/03.jpg


--------------------------------------------------------------------------------
/img-one/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/04.jpg


--------------------------------------------------------------------------------
/img-one/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/05.jpg


--------------------------------------------------------------------------------
/img-one/06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/06.jpg


--------------------------------------------------------------------------------
/img-one/开始.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/开始.png


--------------------------------------------------------------------------------
/img-one/暂停.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-one/暂停.png


--------------------------------------------------------------------------------
/img-two/01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/01.jpg


--------------------------------------------------------------------------------
/img-two/02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/02.jpg


--------------------------------------------------------------------------------
/img-two/03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/03.jpg


--------------------------------------------------------------------------------
/img-two/04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/04.jpg


--------------------------------------------------------------------------------
/img-two/05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/05.jpg


--------------------------------------------------------------------------------
/img-two/06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/06.jpg


--------------------------------------------------------------------------------
/img-two/开始.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/开始.png


--------------------------------------------------------------------------------
/img-two/暂停.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/img-two/暂停.png


--------------------------------------------------------------------------------
/mp3/白月光与朱砂痣.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dxzhang2020/PhotoWall/HEAD/mp3/白月光与朱砂痣.mp3


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # PhotoWall
2 | 3D樱花照片墙   
3 | <BR>效果demo  
4 |   <br> https://dexiongzhang.github.io/PhotoWall/index1.html  
5 |    <br>https://dexiongzhang.github.io/PhotoWall/index2.html
6 | 


--------------------------------------------------------------------------------
/css/style1.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | 
  8 | body {
  9 |     max-width: 100%;
 10 |     min-width: 100%;
 11 |     height: 100%;
 12 |     background-size: cover;
 13 |     background-repeat: no-repeat;
 14 |     background-attachment: fixed;
 15 |     background-size: 100% 100%;
 16 |     position: absolute;
 17 |     margin-left: auto;
 18 |     margin-right: auto;
 19 | }
 20 | 
 21 | /*背景音乐*/
 22 | .m-main {
 23 |     width: 380px;
 24 |     height: 60px;
 25 |     margin: 0 auto;
 26 |     position: fixed;
 27 |     right: 30px;
 28 | }
 29 | 
 30 | .m-main video {
 31 |     display: none;
 32 | }
 33 | 
 34 | .m-main .player {
 35 |     width: 100%;
 36 |     height: 60px;
 37 |     position: relative;
 38 |     bottom: 0;
 39 | }
 40 | 
 41 | .m-main .player>a {
 42 |     display: inline-block;
 43 |     width: 20px;
 44 |     margin: 0 auto;
 45 |     padding: 10px;
 46 |     color: #FFF;
 47 |     text-align: center;
 48 |     float: left;
 49 |     font-size: 12px
 50 | }
 51 | 
 52 | .m-main .player>a img {
 53 |     width: 30px;
 54 |     height: 30px;
 55 |     position: absolute;
 56 |     top: 20px;
 57 |     left: 41px;
 58 | }
 59 | 
 60 | #img1 {
 61 |     display: block;
 62 | }
 63 | 
 64 | #img2 {
 65 |     display: none;
 66 | }
 67 | 
 68 | .m-main .play-box {
 69 |     width: 300px;
 70 |     height: 60px;
 71 |     margin: 0 auto;
 72 |     position: absolute;
 73 |     top: 0;
 74 |     right: 0;
 75 | }
 76 | 
 77 | .m-main .play-box .left {
 78 |     width: 100%;
 79 |     float: left;
 80 | }
 81 | 
 82 | .m-main .play-box .left p.timeline {
 83 |     width: 33%;
 84 |     height: 10px;
 85 |     background-color: rgba(216, 216, 216, 0.5);
 86 |     border-radius: 5px;
 87 |     margin: 30px auto 0;
 88 |     position: relative;
 89 |     z-index: 2;
 90 | }
 91 | 
 92 | .m-main .play-box .left p.timeline span {
 93 |     position: relative;
 94 |     width: 0;
 95 |     height: 10px;
 96 |     background-color: #D3EEDF;
 97 |     border-radius: 5px;
 98 |     display: block;
 99 |     -webkit-transition: width ease-out 0.3s;
100 |     -o-transition: width ease-out 0.3s;
101 |     transition: width ease-out 0.3s;
102 | }
103 | 
104 | .m-main .play-box .left p.timeline span:after {
105 |     content: "";
106 |     position: absolute;
107 |     top: -4px;
108 |     right: -0.6rem;
109 |     width: 1.2rem;
110 |     height: 1.2rem;
111 |     border-radius: 50%;
112 |     background-color: green;
113 | }
114 | 
115 | .m-main .play-box .left div.info {
116 |     height: 26px;
117 |     line-height: 26px;
118 |     font-size: 14px;
119 |     color: #9A9A9A;
120 |     position: relative;
121 |     top: -18px;
122 |     margin: 0 10px;
123 |     z-index: 1;
124 | }
125 | 
126 | .m-main .play-box .left div.info .size {
127 |     float: left;
128 |     display: block;
129 | }
130 | 
131 | .m-main .play-box .left div.info .timeshow {
132 |     float: right;
133 |     display: block;
134 |     margin-right: 30px
135 | }
136 | 
137 | /* ----------------------------------------------- */
138 | li {
139 |     list-style: none;
140 | }
141 | 
142 | .box {
143 |     width: 200px;
144 |     height: 200px;
145 |     background-size: cover;
146 |     background-repeat: no-repeat;
147 |     background-attachment: fixed;
148 |     background-size: 100% 100%;
149 |     position: absolute;
150 |     margin-left: 42%;
151 |     margin-top: 22%;
152 |     -webkit-transform-style: preserve-3d;
153 |     -webkit-transform: rotateX(13deg);
154 |     -webkit-animation: move 5s linear infinite;
155 | }
156 | 
157 | .minbox {
158 |     width: 100px;
159 |     height: 100px;
160 |     position: absolute;
161 |     left: 50px;
162 |     top: 30px;
163 |     -webkit-transform-style: preserve-3d;
164 | }
165 | 
166 | .minbox li {
167 |     width: 100px;
168 |     height: 100px;
169 |     position: absolute;
170 |     left: 0;
171 |     top: 0;
172 | }
173 | 
174 | .minbox li:nth-child(1) {
175 |     background: url(../img-one/01.jpg) no-repeat 0 0;
176 |     -webkit-transform: translateZ(50px);
177 | }
178 | 
179 | .minbox li:nth-child(2) {
180 |     background: url(../img-one/02.jpg) no-repeat 0 0;
181 |     -webkit-transform: rotateX(180deg) translateZ(50px);
182 |     /* transform: rotate(180deg); */
183 | }
184 | 
185 | .minbox li:nth-child(3) {
186 |     background: url(../img-one/03.jpg) no-repeat 0 0;
187 |     -webkit-transform: rotateX(-90deg) translateZ(50px);
188 | }
189 | 
190 | .minbox li:nth-child(4) {
191 |     background: url(../img-one/04.jpg) no-repeat 0 0;
192 |     -webkit-transform: rotateX(90deg) translateZ(50px);
193 | }
194 | 
195 | .minbox li:nth-child(5) {
196 |     background: url(../img-one/05.jpg) no-repeat 0 0;
197 |     -webkit-transform: rotateY(-90deg) translateZ(50px);
198 | }
199 | 
200 | .minbox li:nth-child(6) {
201 |     background: url(../img-one/06.jpg) no-repeat 0 0;
202 |     -webkit-transform: rotateY(90deg) translateZ(50px);
203 | }
204 | 
205 | .maxbox li:nth-child(1) {
206 |     background: url(../img-one/1.jpg) no-repeat 0 0;
207 |     -webkit-transform: translateZ(50px);
208 | }
209 | 
210 | .maxbox li:nth-child(2) {
211 |     background: url(../img-one/2.jpg) no-repeat 0 0;
212 |     -webkit-transform: translateZ(50px);
213 |     /* transform: rotate(180deg); */
214 | }
215 | 
216 | .maxbox li:nth-child(3) {
217 |     background: url(../img-one/3.jpg) no-repeat 0 0;
218 |     -webkit-transform: rotateX(-90deg) translateZ(50px);
219 | }
220 | 
221 | .maxbox li:nth-child(4) {
222 |     background: url(../img-one/4.jpg) no-repeat 0 0;
223 |     -webkit-transform: rotateX(90deg) translateZ(50px);
224 | }
225 | 
226 | .maxbox li:nth-child(5) {
227 |     background: url(../img-one/5.jpg) no-repeat 0 0;
228 |     -webkit-transform: rotateY(-90deg) translateZ(50px);
229 | }
230 | 
231 | .maxbox li:nth-child(6) {
232 |     background: url(../img-one/6.jpg) no-repeat 0 0;
233 |     -webkit-transform: rotateY(90deg) translateZ(50px);
234 | }
235 | 
236 | .maxbox {
237 |     width: 800px;
238 |     height: 400px;
239 |     position: absolute;
240 |     left: 0;
241 |     top: -20px;
242 |     -webkit-transform-style: preserve-3d;
243 | }
244 | 
245 | .maxbox li {
246 |     width: 200px;
247 |     height: 200px;
248 |     background: #fff;
249 |     border: 1px solid #ccc;
250 |     position: absolute;
251 |     left: 0;
252 |     top: 0;
253 |     opacity: 0.2;
254 |     -webkit-transition: all 1s ease;
255 | }
256 | 
257 | .maxbox li:nth-child(1) {
258 |     -webkit-transform: translateZ(100px);
259 | }
260 | 
261 | .maxbox li:nth-child(2) {
262 |     -webkit-transform: rotateX(180deg) translateZ(100px);
263 | }
264 | 
265 | .maxbox li:nth-child(3) {
266 |     -webkit-transform: rotateX(-90deg) translateZ(100px);
267 | }
268 | 
269 | .maxbox li:nth-child(4) {
270 |     -webkit-transform: rotateX(90deg) translateZ(100px);
271 | }
272 | 
273 | .maxbox li:nth-child(5) {
274 |     -webkit-transform: rotateY(-90deg) translateZ(100px);
275 | }
276 | 
277 | .maxbox li:nth-child(6) {
278 |     -webkit-transform: rotateY(90deg) translateZ(100px);
279 | }
280 | 
281 | .box:hover ol li:nth-child(1) {
282 |     -webkit-transform: translateZ(300px);
283 |     width: 400px;
284 |     height: 400px;
285 |     opacity: 0.8;
286 |     left: -100px;
287 |     top: -100px;
288 | }
289 | 
290 | .box:hover ol li:nth-child(2) {
291 |     -webkit-transform: rotateX(180deg) translateZ(300px);
292 |     width: 400px;
293 |     height: 400px;
294 |     opacity: 0.8;
295 |     left: -100px;
296 |     top: -100px;
297 | }
298 | 
299 | .box:hover ol li:nth-child(3) {
300 |     -webkit-transform: rotateX(-90deg) translateZ(300px);
301 |     width: 400px;
302 |     height: 400px;
303 |     opacity: 0.8;
304 |     left: -100px;
305 |     top: -100px;
306 | }
307 | 
308 | .box:hover ol li:nth-child(4) {
309 |     -webkit-transform: rotateX(90deg) translateZ(300px);
310 |     width: 400px;
311 |     height: 400px;
312 |     opacity: 0.8;
313 |     left: -100px;
314 |     top: -100px;
315 | }
316 | 
317 | .box:hover ol li:nth-child(5) {
318 |     -webkit-transform: rotateY(-90deg) translateZ(300px);
319 |     width: 400px;
320 |     height: 400px;
321 |     opacity: 0.8;
322 |     left: -100px;
323 |     top: -100px;
324 | }
325 | 
326 | .box:hover ol li:nth-child(6) {
327 |     -webkit-transform: rotateY(90deg) translateZ(300px);
328 |     width: 400px;
329 |     height: 400px;
330 |     opacity: 0.8;
331 |     left: -100px;
332 |     top: -100px;
333 | }
334 | 
335 | @keyframes move {
336 |     0% {
337 |         -webkit-transform: rotateX(13deg) rotateY(0deg);
338 |     }
339 | 
340 |     100% {
341 |         -webkit-transform: rotateX(13deg) rotateY(360deg);
342 |     }
343 | }


--------------------------------------------------------------------------------
/css/style2.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | 
  8 | body {
  9 |     max-width: 100%;
 10 |     min-width: 100%;
 11 |     height: 100%;
 12 |     background-size: cover;
 13 |     background-repeat: no-repeat;
 14 |     background-attachment: fixed;
 15 |     background-size: 100% 100%;
 16 |     position: absolute;
 17 |     margin-left: auto;
 18 |     margin-right: auto;
 19 | }
 20 | 
 21 | /*背景音乐*/
 22 | .m-main {
 23 |     width: 380px;
 24 |     height: 60px;
 25 |     margin: 0 auto;
 26 |     position: fixed;
 27 |     right: 30px;
 28 | }
 29 | 
 30 | .m-main video {
 31 |     display: none;
 32 | }
 33 | 
 34 | .m-main .player {
 35 |     width: 100%;
 36 |     height: 60px;
 37 |     position: relative;
 38 |     bottom: 0;
 39 | }
 40 | 
 41 | .m-main .player>a {
 42 |     display: inline-block;
 43 |     width: 20px;
 44 |     margin: 0 auto;
 45 |     padding: 10px;
 46 |     color: #FFF;
 47 |     text-align: center;
 48 |     float: left;
 49 |     font-size: 12px
 50 | }
 51 | 
 52 | .m-main .player>a img {
 53 |     width: 30px;
 54 |     height: 30px;
 55 |     position: absolute;
 56 |     top: 20px;
 57 |     left: 41px;
 58 | }
 59 | 
 60 | #img1 {
 61 |     display: block;
 62 | }
 63 | 
 64 | #img2 {
 65 |     display: none;
 66 | }
 67 | 
 68 | .m-main .play-box {
 69 |     width: 300px;
 70 |     height: 60px;
 71 |     margin: 0 auto;
 72 |     position: absolute;
 73 |     top: 0;
 74 |     right: 0;
 75 | }
 76 | 
 77 | .m-main .play-box .left {
 78 |     width: 100%;
 79 |     float: left;
 80 | }
 81 | 
 82 | .m-main .play-box .left p.timeline {
 83 |     width: 33%;
 84 |     height: 10px;
 85 |     background-color: rgba(216, 216, 216, 0.5);
 86 |     border-radius: 5px;
 87 |     margin: 30px auto 0;
 88 |     position: relative;
 89 |     z-index: 2;
 90 | }
 91 | 
 92 | .m-main .play-box .left p.timeline span {
 93 |     position: relative;
 94 |     width: 0;
 95 |     height: 10px;
 96 |     background-color: #D3EEDF;
 97 |     border-radius: 5px;
 98 |     display: block;
 99 |     -webkit-transition: width ease-out 0.3s;
100 |     -o-transition: width ease-out 0.3s;
101 |     transition: width ease-out 0.3s;
102 | }
103 | 
104 | .m-main .play-box .left p.timeline span:after {
105 |     content: "";
106 |     position: absolute;
107 |     top: -4px;
108 |     right: -0.6rem;
109 |     width: 1.2rem;
110 |     height: 1.2rem;
111 |     border-radius: 50%;
112 |     background-color: green;
113 | }
114 | 
115 | .m-main .play-box .left div.info {
116 |     height: 26px;
117 |     line-height: 26px;
118 |     font-size: 14px;
119 |     color: #9A9A9A;
120 |     position: relative;
121 |     top: -18px;
122 |     margin: 0 10px;
123 |     z-index: 1;
124 | }
125 | 
126 | .m-main .play-box .left div.info .size {
127 |     float: left;
128 |     display: block;
129 | }
130 | 
131 | .m-main .play-box .left div.info .timeshow {
132 |     float: right;
133 |     display: block;
134 |     margin-right: 30px
135 | }
136 | 
137 | /* ----------------------------------------------- */
138 | li {
139 |     list-style: none;
140 | }
141 | 
142 | .box {
143 |     width: 200px;
144 |     height: 200px;
145 |     background-size: cover;
146 |     background-repeat: no-repeat;
147 |     background-attachment: fixed;
148 |     background-size: 100% 100%;
149 |     position: absolute;
150 |     margin-left: 42%;
151 |     margin-top: 22%;
152 |     -webkit-transform-style: preserve-3d;
153 |     -webkit-transform: rotateX(13deg);
154 |     -webkit-animation: move 5s linear infinite;
155 | }
156 | 
157 | .minbox {
158 |     width: 100px;
159 |     height: 100px;
160 |     position: absolute;
161 |     left: 50px;
162 |     top: 30px;
163 |     -webkit-transform-style: preserve-3d;
164 | }
165 | 
166 | .minbox li {
167 |     width: 100px;
168 |     height: 100px;
169 |     position: absolute;
170 |     left: 0;
171 |     top: 0;
172 | }
173 | 
174 | .minbox li:nth-child(1) {
175 |     background: url(../img-two/01.jpg) no-repeat 0 0;
176 |     -webkit-transform: translateZ(50px);
177 | }
178 | 
179 | .minbox li:nth-child(2) {
180 |     background: url(../img-two/02.jpg) no-repeat 0 0;
181 |     -webkit-transform: rotateX(180deg) translateZ(50px);
182 |     /* transform: rotate(180deg); */
183 | }
184 | 
185 | .minbox li:nth-child(3) {
186 |     background: url(../img-two/03.jpg) no-repeat 0 0;
187 |     -webkit-transform: rotateX(-90deg) translateZ(50px);
188 | }
189 | 
190 | .minbox li:nth-child(4) {
191 |     background: url(../img-two/04.jpg) no-repeat 0 0;
192 |     -webkit-transform: rotateX(90deg) translateZ(50px);
193 | }
194 | 
195 | .minbox li:nth-child(5) {
196 |     background: url(../img-two/05.jpg) no-repeat 0 0;
197 |     -webkit-transform: rotateY(-90deg) translateZ(50px);
198 | }
199 | 
200 | .minbox li:nth-child(6) {
201 |     background: url(../img-two/06.jpg) no-repeat 0 0;
202 |     -webkit-transform: rotateY(90deg) translateZ(50px);
203 | }
204 | 
205 | .maxbox li:nth-child(1) {
206 |     background: url(../img-two/1.jpg) no-repeat 0 0;
207 |     -webkit-transform: translateZ(50px);
208 | }
209 | 
210 | .maxbox li:nth-child(2) {
211 |     background: url(../img-two/2.jpg) no-repeat 0 0;
212 |     -webkit-transform: translateZ(50px);
213 |     /* transform: rotate(180deg); */
214 | }
215 | 
216 | .maxbox li:nth-child(3) {
217 |     background: url(../img-two/3.jpg) no-repeat 0 0;
218 |     -webkit-transform: rotateX(-90deg) translateZ(50px);
219 | }
220 | 
221 | .maxbox li:nth-child(4) {
222 |     background: url(../img-two/4.jpg) no-repeat 0 0;
223 |     -webkit-transform: rotateX(90deg) translateZ(50px);
224 | }
225 | 
226 | .maxbox li:nth-child(5) {
227 |     background: url(../img-two/5.jpg) no-repeat 0 0;
228 |     -webkit-transform: rotateY(-90deg) translateZ(50px);
229 | }
230 | 
231 | .maxbox li:nth-child(6) {
232 |     background: url(../img-two/6.jpg) no-repeat 0 0;
233 |     -webkit-transform: rotateY(90deg) translateZ(50px);
234 | }
235 | 
236 | .maxbox {
237 |     width: 800px;
238 |     height: 400px;
239 |     position: absolute;
240 |     left: 0;
241 |     top: -20px;
242 |     -webkit-transform-style: preserve-3d;
243 | }
244 | 
245 | .maxbox li {
246 |     width: 200px;
247 |     height: 200px;
248 |     background: #fff;
249 |     border: 1px solid #ccc;
250 |     position: absolute;
251 |     left: 0;
252 |     top: 0;
253 |     opacity: 0.2;
254 |     -webkit-transition: all 1s ease;
255 | }
256 | 
257 | .maxbox li:nth-child(1) {
258 |     -webkit-transform: translateZ(100px);
259 | }
260 | 
261 | .maxbox li:nth-child(2) {
262 |     -webkit-transform: rotateX(180deg) translateZ(100px);
263 | }
264 | 
265 | .maxbox li:nth-child(3) {
266 |     -webkit-transform: rotateX(-90deg) translateZ(100px);
267 | }
268 | 
269 | .maxbox li:nth-child(4) {
270 |     -webkit-transform: rotateX(90deg) translateZ(100px);
271 | }
272 | 
273 | .maxbox li:nth-child(5) {
274 |     -webkit-transform: rotateY(-90deg) translateZ(100px);
275 | }
276 | 
277 | .maxbox li:nth-child(6) {
278 |     -webkit-transform: rotateY(90deg) translateZ(100px);
279 | }
280 | 
281 | .box:hover ol li:nth-child(1) {
282 |     -webkit-transform: translateZ(300px);
283 |     width: 400px;
284 |     height: 400px;
285 |     opacity: 0.8;
286 |     left: -100px;
287 |     top: -100px;
288 | }
289 | 
290 | .box:hover ol li:nth-child(2) {
291 |     -webkit-transform: rotateX(180deg) translateZ(300px);
292 |     width: 400px;
293 |     height: 400px;
294 |     opacity: 0.8;
295 |     left: -100px;
296 |     top: -100px;
297 | }
298 | 
299 | .box:hover ol li:nth-child(3) {
300 |     -webkit-transform: rotateX(-90deg) translateZ(300px);
301 |     width: 400px;
302 |     height: 400px;
303 |     opacity: 0.8;
304 |     left: -100px;
305 |     top: -100px;
306 | }
307 | 
308 | .box:hover ol li:nth-child(4) {
309 |     -webkit-transform: rotateX(90deg) translateZ(300px);
310 |     width: 400px;
311 |     height: 400px;
312 |     opacity: 0.8;
313 |     left: -100px;
314 |     top: -100px;
315 | }
316 | 
317 | .box:hover ol li:nth-child(5) {
318 |     -webkit-transform: rotateY(-90deg) translateZ(300px);
319 |     width: 400px;
320 |     height: 400px;
321 |     opacity: 0.8;
322 |     left: -100px;
323 |     top: -100px;
324 | }
325 | 
326 | .box:hover ol li:nth-child(6) {
327 |     -webkit-transform: rotateY(90deg) translateZ(300px);
328 |     width: 400px;
329 |     height: 400px;
330 |     opacity: 0.8;
331 |     left: -100px;
332 |     top: -100px;
333 | }
334 | 
335 | @keyframes move {
336 |     0% {
337 |         -webkit-transform: rotateX(13deg) rotateY(0deg);
338 |     }
339 | 
340 |     100% {
341 |         -webkit-transform: rotateX(13deg) rotateY(360deg);
342 |     }
343 | }


--------------------------------------------------------------------------------
/index1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8" />
  6 |     <title></title>
  7 |     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8 |     <link type="text/css" href="./css/style1.css" rel="stylesheet" />
  9 |     <style>
 10 |         html,
 11 |         body {
 12 |             width: 100%;
 13 |             height: 100%;
 14 |             margin: 0;
 15 |             padding: 0;
 16 |             overflow: hidden;
 17 |         }
 18 | 
 19 |         .container {
 20 |             width: 100%;
 21 |             height: 100%;
 22 |             margin: 0;
 23 |             padding: 0;
 24 |             background-color: #000000;
 25 |         }
 26 |     </style>
 27 | </head>
 28 | 
 29 | <body>
 30 |     
 31 |     <div class="m-main">
 32 | 		<div class="player">
 33 | 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
 34 | 				<img src="./img-one/开始.png" alt="" id="img1"/>
 35 |             </a>
 36 | 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
 37 | 				<img src="./img-one/暂停.png" alt="" id="img2"/>
 38 | 			</a>
 39 | 			<div class="play-box">
 40 | 				<div class="left">
 41 | 					<p class="timeline"><span style=""></span></p>
 42 | 					<div class="info">
 43 | 						<span class="size">00:00</span>
 44 | 						<span class="timeshow">00:00</span>
 45 | 					</div>
 46 | 				</div>
 47 | 			</div>
 48 | 		</div>
 49 | 		<div class="video">
 50 | 			<video controls autoplay name="media" id="js-video"><source src="./mp3/白月光与朱砂痣.mp3" type="video/mp4"></video>
 51 | 		</div>
 52 | 	</div>
 53 | </div>
 54 |     <div id="jsi-cherry-container" class="container">
 55 |         <div class="box">
 56 |             <ul class="minbox">
 57 |                 <li></li>
 58 |                 <li></li>
 59 |                 <li></li>
 60 |                 <li></li>
 61 |                 <li></li>
 62 |                 <li></li>
 63 |             </ul>
 64 |             <ol class="maxbox">
 65 |                 <li></li>
 66 |                 <li></li>
 67 |                 <li></li>
 68 |                 <li></li>
 69 |                 <li></li>
 70 |                 <li></li>
 71 |             </ol>
 72 |         </div>
 73 |     </div>
 74 |     <script>
 75 |         $(function () {
 76 |             AudioControl('js-video');
 77 | 
 78 |             function AudioControl(id) {
 79 |                 // 音频控制进度条
 80 |                 console.log(777);
 81 |                 var audio = document.getElementById(id);
 82 |                 $(audio).on('loadedmetadata', function () {
 83 |                     audio.pause();
 84 |                     // 进度条控制
 85 |                     $(document).on('touchend', '.timeline', function (e) {
 86 |                         var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
 87 |                         var X = x < 0 ? 0 : x;
 88 |                         var W = $(this).width();
 89 |                         var place = X > W ? W : X;
 90 |                         audio.currentTime = (place / W).toFixed(2) * audio.duration;
 91 |                         $(this).children().css({
 92 |                             width: (place / W).toFixed(2) * 100 + "%"
 93 |                         })
 94 |                     });
 95 |                     // 播放
 96 |                     $(document).on('click', '#js-play', function () {
 97 |                         audio.play()
 98 |                         $('#img1').css("display","none");
 99 |                         $('#img2').css("display","block");
100 |                     });
101 |                     // 暂停
102 |                     $(document).on('click', '#js-pause', function () {
103 |                         audio.pause()
104 |                         $('#img1').css("display","block");
105 |                         $('#img2').css("display","none");
106 |                     });
107 |                 });
108 |                 setInterval(function () {
109 |                     var currentTime = audio.currentTime;
110 |                     setTimeShow(currentTime);
111 |                 }, 1000);
112 |                 // 设置播放时间
113 |                 function setTimeShow(t) {
114 |                     t = Math.floor(t);
115 |                     var playTime = secondToMin(audio.currentTime);
116 |                     $(".size").html(playTime);
117 |                     $('.timeshow').text(secondToMin(audio.duration));
118 |                     $('.timeline').children().css({
119 |                         width: (t / audio.duration).toFixed(4) * 100 + "%"
120 |                     })
121 |                 }
122 |                 // 计算时间
123 |                 function secondToMin(s) {
124 |                     var MM = Math.floor(s / 60);
125 |                     var SS = s % 60;
126 |                     if (MM < 10)
127 |                         MM = "0" + MM;
128 |                     if (SS < 10)
129 |                         SS = "0" + SS;
130 |                     var min = MM + ":" + SS;
131 |                     return min.split('.')[0];
132 |                 }
133 |             }
134 |         })
135 |         var RENDERER = {
136 |             INIT_CHERRY_BLOSSOM_COUNT: 30,
137 |             MAX_ADDING_INTERVAL: 10,
138 | 
139 |             init: function () {
140 |                 this.setParameters();
141 |                 this.reconstructMethods();
142 |                 this.createCherries();
143 |                 this.render();
144 |                 if (
145 |                     navigator.userAgent.match(
146 |                         /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
147 |                     )
148 |                 ) {
149 |                     var box = document.querySelectorAll('.box')[0];
150 |                     console.log(box, '移动端');
151 |                     box.style.marginTop = '65%';
152 |                 }
153 |             },
154 |             setParameters: function () {
155 |                 this.$container = $('#jsi-cherry-container');
156 |                 this.width = this.$container.width();
157 |                 this.height = this.$container.height();
158 |                 this.context = $('<canvas />')
159 |                     .attr({
160 |                         width: this.width,
161 |                         height: this.height
162 |                     })
163 |                     .appendTo(this.$container)
164 |                     .get(0)
165 |                     .getContext('2d');
166 |                 this.cherries = [];
167 |                 this.maxAddingInterval = Math.round(
168 |                     (this.MAX_ADDING_INTERVAL * 1000) / this.width
169 |                 );
170 |                 this.addingInterval = this.maxAddingInterval;
171 |             },
172 |             reconstructMethods: function () {
173 |                 this.render = this.render.bind(this);
174 |             },
175 |             createCherries: function () {
176 |                 for (
177 |                     var i = 0,
178 |                         length = Math.round(
179 |                             (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
180 |                         ); i < length; i++
181 |                 ) {
182 |                     this.cherries.push(new CHERRY_BLOSSOM(this, true));
183 |                 }
184 |             },
185 |             render: function () {
186 |                 requestAnimationFrame(this.render);
187 |                 this.context.clearRect(0, 0, this.width, this.height);
188 | 
189 |                 this.cherries.sort(function (cherry1, cherry2) {
190 |                     return cherry1.z - cherry2.z;
191 |                 });
192 |                 for (var i = this.cherries.length - 1; i >= 0; i--) {
193 |                     if (!this.cherries[i].render(this.context)) {
194 |                         this.cherries.splice(i, 1);
195 |                     }
196 |                 }
197 |                 if (--this.addingInterval == 0) {
198 |                     this.addingInterval = this.maxAddingInterval;
199 |                     this.cherries.push(new CHERRY_BLOSSOM(this, false));
200 |                 }
201 |             }
202 |         };
203 |         var CHERRY_BLOSSOM = function (renderer, isRandom) {
204 |             this.renderer = renderer;
205 |             this.init(isRandom);
206 |         };
207 |         CHERRY_BLOSSOM.prototype = {
208 |             FOCUS_POSITION: 300,
209 |             FAR_LIMIT: 600,
210 |             MAX_RIPPLE_COUNT: 100,
211 |             RIPPLE_RADIUS: 100,
212 |             SURFACE_RATE: 0.5,
213 |             SINK_OFFSET: 20,
214 | 
215 |             init: function (isRandom) {
216 |                 this.x = this.getRandomValue(
217 |                     -this.renderer.width,
218 |                     this.renderer.width
219 |                 );
220 |                 this.y = isRandom ?
221 |                     this.getRandomValue(0, this.renderer.height) :
222 |                     this.renderer.height * 1.5;
223 |                 this.z = this.getRandomValue(0, this.FAR_LIMIT);
224 |                 this.vx = this.getRandomValue(-2, 2);
225 |                 this.vy = -2;
226 |                 this.theta = this.getRandomValue(0, Math.PI * 2);
227 |                 this.phi = this.getRandomValue(0, Math.PI * 2);
228 |                 this.psi = 0;
229 |                 this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
230 |                 this.opacity = 0;
231 |                 this.endTheta = false;
232 |                 this.endPhi = false;
233 |                 this.rippleCount = 0;
234 | 
235 |                 var axis = this.getAxis(),
236 |                     theta =
237 |                     this.theta +
238 |                     (Math.ceil(
239 |                             -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
240 |                         ) *
241 |                         Math.PI) /
242 |                     500;
243 |                 theta %= Math.PI * 2;
244 | 
245 |                 this.offsetY =
246 |                     40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
247 |                 this.thresholdY =
248 |                     this.renderer.height / 2 +
249 |                     this.renderer.height * this.SURFACE_RATE * axis.rate;
250 |                 this.entityColor = this.renderer.context.createRadialGradient(
251 |                     0,
252 |                     40,
253 |                     0,
254 |                     0,
255 |                     40,
256 |                     80
257 |                 );
258 |                 this.entityColor.addColorStop(
259 |                     0,
260 |                     'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
261 |                 );
262 |                 this.entityColor.addColorStop(
263 |                     0.05,
264 |                     'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
265 |                 );
266 |                 this.entityColor.addColorStop(
267 |                     1,
268 |                     'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
269 |                 );
270 |                 this.shadowColor = this.renderer.context.createRadialGradient(
271 |                     0,
272 |                     40,
273 |                     0,
274 |                     0,
275 |                     40,
276 |                     80
277 |                 );
278 |                 this.shadowColor.addColorStop(
279 |                     0,
280 |                     'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)'
281 |                 );
282 |                 this.shadowColor.addColorStop(
283 |                     0.05,
284 |                     'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)'
285 |                 );
286 |                 this.shadowColor.addColorStop(
287 |                     1,
288 |                     'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)'
289 |                 );
290 |             },
291 |             getRandomValue: function (min, max) {
292 |                 return min + (max - min) * Math.random();
293 |             },
294 |             getAxis: function () {
295 |                 var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
296 |                     x = this.renderer.width / 2 + this.x * rate,
297 |                     y = this.renderer.height / 2 - this.y * rate;
298 |                 return {
299 |                     rate: rate,
300 |                     x: x,
301 |                     y: y
302 |                 };
303 |             },
304 |             renderCherry: function (context, axis) {
305 |                 context.beginPath();
306 |                 context.moveTo(0, 40);
307 |                 context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
308 |                 context.bezierCurveTo(10, -60, 60, 20, 0, 40);
309 |                 context.fill();
310 | 
311 |                 for (var i = -4; i < 4; i++) {
312 |                     context.beginPath();
313 |                     context.moveTo(0, 40);
314 |                     context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);
315 |                     context.stroke();
316 |                 }
317 |             },
318 |             render: function (context) {
319 |                 var axis = this.getAxis();
320 | 
321 |                 if (
322 |                     axis.y == this.thresholdY &&
323 |                     this.rippleCount < this.MAX_RIPPLE_COUNT
324 |                 ) {
325 |                     context.save();
326 |                     context.lineWidth = 2;
327 |                     context.strokeStyle =
328 |                         'hsla(0, 0%, 100%, ' +
329 |                         (this.MAX_RIPPLE_COUNT - this.rippleCount) /
330 |                         this.MAX_RIPPLE_COUNT +
331 |                         ')';
332 |                     context.translate(
333 |                         axis.x +
334 |                         this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),
335 |                         axis.y
336 |                     );
337 |                     context.scale(1, 0.3);
338 |                     context.beginPath();
339 |                     context.arc(
340 |                         0,
341 |                         0,
342 |                         (this.rippleCount / this.MAX_RIPPLE_COUNT) *
343 |                         this.RIPPLE_RADIUS *
344 |                         axis.rate,
345 |                         0,
346 |                         Math.PI * 2,
347 |                         false
348 |                     );
349 |                     context.stroke();
350 |                     context.restore();
351 |                     this.rippleCount++;
352 |                 }
353 |                 if (axis.y < this.thresholdY || !this.endTheta || !this.endPhi) {
354 |                     if (this.y <= 0) {
355 |                         this.opacity = Math.min(this.opacity + 0.01, 1);
356 |                     }
357 |                     context.save();
358 |                     context.globalAlpha = this.opacity;
359 |                     context.fillStyle = this.shadowColor;
360 |                     context.strokeStyle =
361 |                         'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
362 |                     context.translate(
363 |                         axis.x,
364 |                         Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y)
365 |                     );
366 |                     context.rotate(Math.PI - this.theta);
367 |                     context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
368 |                     context.translate(0, this.offsetY);
369 |                     this.renderCherry(context, axis);
370 |                     context.restore();
371 |                 }
372 |                 context.save();
373 |                 context.fillStyle = this.entityColor;
374 |                 context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
375 |                 context.translate(
376 |                     axis.x,
377 |                     axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate)
378 |                 );
379 |                 context.rotate(this.theta);
380 |                 context.scale(axis.rate * Math.sin(this.phi), axis.rate);
381 |                 context.translate(0, this.offsetY);
382 |                 this.renderCherry(context, axis);
383 |                 context.restore();
384 | 
385 |                 if (this.y <= -this.renderer.height / 4) {
386 |                     if (!this.endTheta) {
387 |                         for (
388 |                             var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI
389 |                         ) {
390 |                             if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
391 |                                 this.theta = theta;
392 |                                 this.endTheta = true;
393 |                                 break;
394 |                             }
395 |                         }
396 |                     }
397 |                     if (!this.endPhi) {
398 |                         for (
399 |                             var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4
400 |                         ) {
401 |                             if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
402 |                                 this.phi = Math.PI / 8;
403 |                                 this.endPhi = true;
404 |                                 break;
405 |                             }
406 |                         }
407 |                     }
408 |                 }
409 |                 if (!this.endTheta) {
410 |                     if (axis.y == this.thresholdY) {
411 |                         this.theta +=
412 |                             (Math.PI / 200) *
413 |                             (this.theta < Math.PI / 2 ||
414 |                                 (this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ?
415 |                                 1 :
416 |                                 -1);
417 |                     } else {
418 |                         this.theta += Math.PI / 500;
419 |                     }
420 |                     this.theta %= Math.PI * 2;
421 |                 }
422 |                 if (this.endPhi) {
423 |                     if (this.rippleCount == this.MAX_RIPPLE_COUNT) {
424 |                         this.psi += this.dpsi;
425 |                         this.psi %= Math.PI * 2;
426 |                     }
427 |                 } else {
428 |                     this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);
429 |                     this.phi %= Math.PI;
430 |                 }
431 |                 if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
432 |                     this.x += 2;
433 |                     this.y = -this.renderer.height * this.SURFACE_RATE;
434 |                 } else {
435 |                     this.x += this.vx;
436 |                     this.y += this.vy;
437 |                 }
438 |                 return (
439 |                     this.z > -this.FOCUS_POSITION &&
440 |                     this.z < this.FAR_LIMIT &&
441 |                     this.x < this.renderer.width * 1.5
442 |                 );
443 |             }
444 |         };
445 |         $(function () {
446 |             console.log(6666);
447 |             RENDERER.init();
448 |         });
449 |     </script>
450 |     <style>
451 |         html,
452 |         body {
453 |             width: 100%;
454 |             height: 100%;
455 |             margin: 0;
456 |             padding: 0;
457 |             overflow: hidden;
458 |         }
459 | 
460 |         .container {
461 |             width: 100%;
462 |             height: 100%;
463 |             margin: 0;
464 |             padding: 0;
465 |             background-color: #000000;
466 |         }
467 |     </style>
468 | </body>
469 | 
470 | </html>


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8" />
  6 |     <title></title>
  7 |     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8 |     <link type="text/css" href="./css/style2.css" rel="stylesheet" />
  9 |     <style>
 10 |         html,
 11 |         body {
 12 |             width: 100%;
 13 |             height: 100%;
 14 |             margin: 0;
 15 |             padding: 0;
 16 |             overflow: hidden;
 17 |         }
 18 | 
 19 |         .container {
 20 |             width: 100%;
 21 |             height: 100%;
 22 |             margin: 0;
 23 |             padding: 0;
 24 |             background-color: #000000;
 25 |         }
 26 |     </style>
 27 | </head>
 28 | 
 29 | <body>
 30 |     
 31 |     <div class="m-main">
 32 | 		<div class="player">
 33 | 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
 34 | 				<img src="./img-two/开始.png" alt="" id="img1"/>
 35 |             </a>
 36 | 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
 37 | 				<img src="./img-two/暂停.png" alt="" id="img2"/>
 38 | 			</a>
 39 | 			<div class="play-box">
 40 | 				<div class="left">
 41 | 					<p class="timeline"><span style=""></span></p>
 42 | 					<div class="info">
 43 | 						<span class="size">00:00</span>
 44 | 						<span class="timeshow">00:00</span>
 45 | 					</div>
 46 | 				</div>
 47 | 			</div>
 48 | 		</div>
 49 | 		<div class="video">
 50 | 			<video controls autoplay name="media" id="js-video"><source src="./mp3/沉醉的青丝.mp3" type="video/mp4"></video>
 51 | 		</div>
 52 | 	</div>
 53 | </div>
 54 |     <div id="jsi-cherry-container" class="container">
 55 |         <div class="box">
 56 |             <ul class="minbox">
 57 |                 <li></li>
 58 |                 <li></li>
 59 |                 <li></li>
 60 |                 <li></li>
 61 |                 <li></li>
 62 |                 <li></li>
 63 |             </ul>
 64 |             <ol class="maxbox">
 65 |                 <li></li>
 66 |                 <li></li>
 67 |                 <li></li>
 68 |                 <li></li>
 69 |                 <li></li>
 70 |                 <li></li>
 71 |             </ol>
 72 |         </div>
 73 |     </div>
 74 |     <script>
 75 |         $(function () {
 76 |             AudioControl('js-video');
 77 | 
 78 |             function AudioControl(id) {
 79 |                 // 音频控制进度条
 80 |                 console.log(777);
 81 |                 var audio = document.getElementById(id);
 82 |                 $(audio).on('loadedmetadata', function () {
 83 |                     audio.pause();
 84 |                     // 进度条控制
 85 |                     $(document).on('touchend', '.timeline', function (e) {
 86 |                         var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
 87 |                         var X = x < 0 ? 0 : x;
 88 |                         var W = $(this).width();
 89 |                         var place = X > W ? W : X;
 90 |                         audio.currentTime = (place / W).toFixed(2) * audio.duration;
 91 |                         $(this).children().css({
 92 |                             width: (place / W).toFixed(2) * 100 + "%"
 93 |                         })
 94 |                     });
 95 |                     // 播放
 96 |                     $(document).on('click', '#js-play', function () {
 97 |                         audio.play()
 98 |                         $('#img1').css("display","none");
 99 |                         $('#img2').css("display","block");
100 |                     });
101 |                     // 暂停
102 |                     $(document).on('click', '#js-pause', function () {
103 |                         audio.pause()
104 |                         $('#img1').css("display","block");
105 |                         $('#img2').css("display","none");
106 |                     });
107 |                 });
108 |                 setInterval(function () {
109 |                     var currentTime = audio.currentTime;
110 |                     setTimeShow(currentTime);
111 |                 }, 1000);
112 |                 // 设置播放时间
113 |                 function setTimeShow(t) {
114 |                     t = Math.floor(t);
115 |                     var playTime = secondToMin(audio.currentTime);
116 |                     $(".size").html(playTime);
117 |                     $('.timeshow').text(secondToMin(audio.duration));
118 |                     $('.timeline').children().css({
119 |                         width: (t / audio.duration).toFixed(4) * 100 + "%"
120 |                     })
121 |                 }
122 |                 // 计算时间
123 |                 function secondToMin(s) {
124 |                     var MM = Math.floor(s / 60);
125 |                     var SS = s % 60;
126 |                     if (MM < 10)
127 |                         MM = "0" + MM;
128 |                     if (SS < 10)
129 |                         SS = "0" + SS;
130 |                     var min = MM + ":" + SS;
131 |                     return min.split('.')[0];
132 |                 }
133 |             }
134 |         })
135 |         var RENDERER = {
136 |             INIT_CHERRY_BLOSSOM_COUNT: 30,
137 |             MAX_ADDING_INTERVAL: 10,
138 | 
139 |             init: function () {
140 |                 this.setParameters();
141 |                 this.reconstructMethods();
142 |                 this.createCherries();
143 |                 this.render();
144 |                 if (
145 |                     navigator.userAgent.match(
146 |                         /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
147 |                     )
148 |                 ) {
149 |                     var box = document.querySelectorAll('.box')[0];
150 |                     console.log(box, '移动端');
151 |                     box.style.marginTop = '65%';
152 |                 }
153 |             },
154 |             setParameters: function () {
155 |                 this.$container = $('#jsi-cherry-container');
156 |                 this.width = this.$container.width();
157 |                 this.height = this.$container.height();
158 |                 this.context = $('<canvas />')
159 |                     .attr({
160 |                         width: this.width,
161 |                         height: this.height
162 |                     })
163 |                     .appendTo(this.$container)
164 |                     .get(0)
165 |                     .getContext('2d');
166 |                 this.cherries = [];
167 |                 this.maxAddingInterval = Math.round(
168 |                     (this.MAX_ADDING_INTERVAL * 1000) / this.width
169 |                 );
170 |                 this.addingInterval = this.maxAddingInterval;
171 |             },
172 |             reconstructMethods: function () {
173 |                 this.render = this.render.bind(this);
174 |             },
175 |             createCherries: function () {
176 |                 for (
177 |                     var i = 0,
178 |                         length = Math.round(
179 |                             (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
180 |                         ); i < length; i++
181 |                 ) {
182 |                     this.cherries.push(new CHERRY_BLOSSOM(this, true));
183 |                 }
184 |             },
185 |             render: function () {
186 |                 requestAnimationFrame(this.render);
187 |                 this.context.clearRect(0, 0, this.width, this.height);
188 | 
189 |                 this.cherries.sort(function (cherry1, cherry2) {
190 |                     return cherry1.z - cherry2.z;
191 |                 });
192 |                 for (var i = this.cherries.length - 1; i >= 0; i--) {
193 |                     if (!this.cherries[i].render(this.context)) {
194 |                         this.cherries.splice(i, 1);
195 |                     }
196 |                 }
197 |                 if (--this.addingInterval == 0) {
198 |                     this.addingInterval = this.maxAddingInterval;
199 |                     this.cherries.push(new CHERRY_BLOSSOM(this, false));
200 |                 }
201 |             }
202 |         };
203 |         var CHERRY_BLOSSOM = function (renderer, isRandom) {
204 |             this.renderer = renderer;
205 |             this.init(isRandom);
206 |         };
207 |         CHERRY_BLOSSOM.prototype = {
208 |             FOCUS_POSITION: 300,
209 |             FAR_LIMIT: 600,
210 |             MAX_RIPPLE_COUNT: 100,
211 |             RIPPLE_RADIUS: 100,
212 |             SURFACE_RATE: 0.5,
213 |             SINK_OFFSET: 20,
214 | 
215 |             init: function (isRandom) {
216 |                 this.x = this.getRandomValue(
217 |                     -this.renderer.width,
218 |                     this.renderer.width
219 |                 );
220 |                 this.y = isRandom ?
221 |                     this.getRandomValue(0, this.renderer.height) :
222 |                     this.renderer.height * 1.5;
223 |                 this.z = this.getRandomValue(0, this.FAR_LIMIT);
224 |                 this.vx = this.getRandomValue(-2, 2);
225 |                 this.vy = -2;
226 |                 this.theta = this.getRandomValue(0, Math.PI * 2);
227 |                 this.phi = this.getRandomValue(0, Math.PI * 2);
228 |                 this.psi = 0;
229 |                 this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
230 |                 this.opacity = 0;
231 |                 this.endTheta = false;
232 |                 this.endPhi = false;
233 |                 this.rippleCount = 0;
234 | 
235 |                 var axis = this.getAxis(),
236 |                     theta =
237 |                     this.theta +
238 |                     (Math.ceil(
239 |                             -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
240 |                         ) *
241 |                         Math.PI) /
242 |                     500;
243 |                 theta %= Math.PI * 2;
244 | 
245 |                 this.offsetY =
246 |                     40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
247 |                 this.thresholdY =
248 |                     this.renderer.height / 2 +
249 |                     this.renderer.height * this.SURFACE_RATE * axis.rate;
250 |                 this.entityColor = this.renderer.context.createRadialGradient(
251 |                     0,
252 |                     40,
253 |                     0,
254 |                     0,
255 |                     40,
256 |                     80
257 |                 );
258 |                 this.entityColor.addColorStop(
259 |                     0,
260 |                     'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
261 |                 );
262 |                 this.entityColor.addColorStop(
263 |                     0.05,
264 |                     'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
265 |                 );
266 |                 this.entityColor.addColorStop(
267 |                     1,
268 |                     'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
269 |                 );
270 |                 this.shadowColor = this.renderer.context.createRadialGradient(
271 |                     0,
272 |                     40,
273 |                     0,
274 |                     0,
275 |                     40,
276 |                     80
277 |                 );
278 |                 this.shadowColor.addColorStop(
279 |                     0,
280 |                     'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)'
281 |                 );
282 |                 this.shadowColor.addColorStop(
283 |                     0.05,
284 |                     'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)'
285 |                 );
286 |                 this.shadowColor.addColorStop(
287 |                     1,
288 |                     'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)'
289 |                 );
290 |             },
291 |             getRandomValue: function (min, max) {
292 |                 return min + (max - min) * Math.random();
293 |             },
294 |             getAxis: function () {
295 |                 var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
296 |                     x = this.renderer.width / 2 + this.x * rate,
297 |                     y = this.renderer.height / 2 - this.y * rate;
298 |                 return {
299 |                     rate: rate,
300 |                     x: x,
301 |                     y: y
302 |                 };
303 |             },
304 |             renderCherry: function (context, axis) {
305 |                 context.beginPath();
306 |                 context.moveTo(0, 40);
307 |                 context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
308 |                 context.bezierCurveTo(10, -60, 60, 20, 0, 40);
309 |                 context.fill();
310 | 
311 |                 for (var i = -4; i < 4; i++) {
312 |                     context.beginPath();
313 |                     context.moveTo(0, 40);
314 |                     context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);
315 |                     context.stroke();
316 |                 }
317 |             },
318 |             render: function (context) {
319 |                 var axis = this.getAxis();
320 | 
321 |                 if (
322 |                     axis.y == this.thresholdY &&
323 |                     this.rippleCount < this.MAX_RIPPLE_COUNT
324 |                 ) {
325 |                     context.save();
326 |                     context.lineWidth = 2;
327 |                     context.strokeStyle =
328 |                         'hsla(0, 0%, 100%, ' +
329 |                         (this.MAX_RIPPLE_COUNT - this.rippleCount) /
330 |                         this.MAX_RIPPLE_COUNT +
331 |                         ')';
332 |                     context.translate(
333 |                         axis.x +
334 |                         this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),
335 |                         axis.y
336 |                     );
337 |                     context.scale(1, 0.3);
338 |                     context.beginPath();
339 |                     context.arc(
340 |                         0,
341 |                         0,
342 |                         (this.rippleCount / this.MAX_RIPPLE_COUNT) *
343 |                         this.RIPPLE_RADIUS *
344 |                         axis.rate,
345 |                         0,
346 |                         Math.PI * 2,
347 |                         false
348 |                     );
349 |                     context.stroke();
350 |                     context.restore();
351 |                     this.rippleCount++;
352 |                 }
353 |                 if (axis.y < this.thresholdY || !this.endTheta || !this.endPhi) {
354 |                     if (this.y <= 0) {
355 |                         this.opacity = Math.min(this.opacity + 0.01, 1);
356 |                     }
357 |                     context.save();
358 |                     context.globalAlpha = this.opacity;
359 |                     context.fillStyle = this.shadowColor;
360 |                     context.strokeStyle =
361 |                         'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
362 |                     context.translate(
363 |                         axis.x,
364 |                         Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y)
365 |                     );
366 |                     context.rotate(Math.PI - this.theta);
367 |                     context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
368 |                     context.translate(0, this.offsetY);
369 |                     this.renderCherry(context, axis);
370 |                     context.restore();
371 |                 }
372 |                 context.save();
373 |                 context.fillStyle = this.entityColor;
374 |                 context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
375 |                 context.translate(
376 |                     axis.x,
377 |                     axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate)
378 |                 );
379 |                 context.rotate(this.theta);
380 |                 context.scale(axis.rate * Math.sin(this.phi), axis.rate);
381 |                 context.translate(0, this.offsetY);
382 |                 this.renderCherry(context, axis);
383 |                 context.restore();
384 | 
385 |                 if (this.y <= -this.renderer.height / 4) {
386 |                     if (!this.endTheta) {
387 |                         for (
388 |                             var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI
389 |                         ) {
390 |                             if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
391 |                                 this.theta = theta;
392 |                                 this.endTheta = true;
393 |                                 break;
394 |                             }
395 |                         }
396 |                     }
397 |                     if (!this.endPhi) {
398 |                         for (
399 |                             var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4
400 |                         ) {
401 |                             if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
402 |                                 this.phi = Math.PI / 8;
403 |                                 this.endPhi = true;
404 |                                 break;
405 |                             }
406 |                         }
407 |                     }
408 |                 }
409 |                 if (!this.endTheta) {
410 |                     if (axis.y == this.thresholdY) {
411 |                         this.theta +=
412 |                             (Math.PI / 200) *
413 |                             (this.theta < Math.PI / 2 ||
414 |                                 (this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ?
415 |                                 1 :
416 |                                 -1);
417 |                     } else {
418 |                         this.theta += Math.PI / 500;
419 |                     }
420 |                     this.theta %= Math.PI * 2;
421 |                 }
422 |                 if (this.endPhi) {
423 |                     if (this.rippleCount == this.MAX_RIPPLE_COUNT) {
424 |                         this.psi += this.dpsi;
425 |                         this.psi %= Math.PI * 2;
426 |                     }
427 |                 } else {
428 |                     this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);
429 |                     this.phi %= Math.PI;
430 |                 }
431 |                 if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
432 |                     this.x += 2;
433 |                     this.y = -this.renderer.height * this.SURFACE_RATE;
434 |                 } else {
435 |                     this.x += this.vx;
436 |                     this.y += this.vy;
437 |                 }
438 |                 return (
439 |                     this.z > -this.FOCUS_POSITION &&
440 |                     this.z < this.FAR_LIMIT &&
441 |                     this.x < this.renderer.width * 1.5
442 |                 );
443 |             }
444 |         };
445 |         $(function () {
446 |             console.log(6666);
447 |             RENDERER.init();
448 |         });
449 |     </script>
450 |     <style>
451 |         html,
452 |         body {
453 |             width: 100%;
454 |             height: 100%;
455 |             margin: 0;
456 |             padding: 0;
457 |             overflow: hidden;
458 |         }
459 | 
460 |         .container {
461 |             width: 100%;
462 |             height: 100%;
463 |             margin: 0;
464 |             padding: 0;
465 |             background-color: #000000;
466 |         }
467 |     </style>
468 | </body>
469 | 
470 | </html>
471 | 


--------------------------------------------------------------------------------