HTML+CSS 实现水流流动效果，css水流
1
2
3
4
5
6
7
8
9
10
11 *{
12 padding:0;
13 margin:0;
14 font:24px/24px "Microsoft Yahei";
15 color:white;
16 }
17 body{
18 background:#202020;
19 }
20 .main{
21 width:1520px;
22 height:900px;
23 background:#06192A;
24 margin:0 auto;
25 border:2px solid white;
26 }
27 .main header{
28 height:150px;
29 border-bottom:2px solid #637382;
30 }
31 .main header h1{
32 text-align:center;
33 font-weight:bolder;
34 position:relative;
35 bottom:0;
36 padding-top:104px;
37 }
38 .main section{
39 /*width:1296px;*/
40 height:500px;
41 margin:0 auto;
42 }
43
44 .main section .title{
45 display:inline-block;
46 height:30px;
47 line-height:30px;
48 padding-top:20px;
49 width:100%;
50 }
51
52 .main section b.radio,.main section b.radio:before{
53 display:block;
54 position:relative;
55 }
56 .main section b.radio{
57 width:16px;
58 height:16px;
59 border-radius:8px;
60 background:white;
61 margin-left:2px;
62
63 float:right;
64 margin-right:68px;
65 }
66
67 .main section b.green:before,.main section b.red:before,.main section b.yellow:before{
68 width:12px;
69 height:12px;
70 content:"";
71 border-radius:6px;
72 top:2px;
73 left:2px;
74 }
75
76 .main section b.green:before{
77 background:#008F40;
78 }
79
80 .main section b.red:before{
81 background:#D10F12;
82 }
83
84 .main section b.yellow:before{
85 background:#F4A700;
86 }
87
88 .main section b.green:after,.main section b.red:after,.main section b.yellow:after{
89 display:block;
90 width:40px;
91 font-size:20px;
92 position:relative;
93 top:-17px;
94 left:-47px;
95 }
96
97 .main section .title b.green:after{
98 content:"运行";
99 }
100 .main section .title b.red:after{
101 content:"故障";
102 }
103 .main section .title b.yellow:after{
104 content:"报警";
105 }
106
107 .content{
108 display:inline-block;
109 position:relative;
110 width:100%;
111 height:100%;
112 }
113
114 .content .bg b{
115 position:absolute !important;
116 margin-right:15px !important;
117 }
118
119 .content .s1{
120 background-image:url(images/hospital/s1.png);
121 width:368.4px;
122 height:412.8px;
123 }
124
125 .content .s1 .arrow{
126 -webkit-transform:rotate(90deg);
127 -moz-transform:rotate(90deg);
128 -ms-transform:rotate(90deg);
129 -o-transform:rotate(90deg);
130 transform:rotate(90deg);
131 top:92px;
132 left:57px;
133 }
134
135 .content .s1 b{
136 bottom:24px;
137 right:70px;
138 }
139
140 .content .s2{
141 background-image:url(images/hospital/s2.png);
142 width:250.2px;
143 height:208.2px;
144 left:380px;
145 top:216px;
146 }
147
148 .content .s2 b,.content .s3 b,.content .s4 b{
149 bottom:35px;
150 right:35px;
151 }
152
153 .content .s3{
154 background-image:url(images/hospital/s3.png);
155 width:250.2px;
156 height:208.2px;
157 left:680px;
158 top:216px;
159 }
160
161 .content .s4{
162 background-image:url(images/hospital/s4.png);
163 width:250.2px;
164 height:208.2px;
165 left:980px;
166 top:216px;
167 }
168
169 .content .s5{
170 background-image:url(images/hospital/s5.png);
171 width:202.15px;
172 height:113.75px;
173 left:1270px;
174 top:300px;
175 }
176
177 .content .s5 span{
178 font-size:20px;
179 position:relative;
180 left:80px;
181 }
182
183 .content .arrow{
184 background-image:url(images/hospital/arrow.png);
185 width:53.1px;
186 height:23.4px;
187 zoom:2 !important;
188 top:-8px;
189 left:1px;
190 }
191
192 .content .f1{
193 background-image:url(images/hospital/f1.png);
194 width:171.6px;
195 height:163.8px;
196 top:33px;
197 left:416px;
198 }
199
200 .content .f1 b{
201 bottom:53px;
202 left:-24px;
203 }
204
205 .content .f1 b:after{
206 content:"余氮值";
207 width:60px !important;
208 left:-21px !important;
209 top:-40px !important;
210 }
211
212 .content .f2{
213 background-image:url(images/hospital/f2.png);
214 width:250.2px;
215 height:208.2px;
216 top:0;
217 left:680px;
218 }
219
220 .content .t1{
221 background-image:url(images/hospital/f1.png);
222 width:171.6px;
223 height:163.8px;
224 top:530px;
225 left:416px;
226 }
227
228 .content .t2{
229 background-image:url(images/hospital/t2.png);
230 width:182px;
231 height:140.25px;
232 top:530px;
233 left:701px;
234 }
235
236 .content .t2 b{
237 right:-16px;
238 top:65px;
239 }
240
241 .pt92{
242 top:92px !important;
243 }
244
245 .content .bg{
246 background-repeat:no-repeat;
247 background-position:center center;
248 background-size:cover;
249 -webkit-background-size:cover;/*兼容Webkit内核浏览器如Chrome和Safari*/
250 -o-background-size:cover;/*兼容Opera*/
251 zoom:1;
252 position:absolute;
253 z-index:2;
254 }
255
256 .pr48{
257 right:48px !important;
258 }
259 .pb33{
260 bottom:33px !important;
261 }
262 .pr12{
263 right:12px !important;
264 }
265 .pb44{
266 bottom:44px !important;
267 }
268
269 .content .gw{
270 content:"";
271 height:7px;
272 border-top:1px solid #83868C;
273 border-bottom:1px solid #83868C;
274 position:absolute;
275
276 background:#06192A;
277 }
278
279 .content .f1-f2{
280 left:544px;
281 top:135px;
282 width:693px;
283 }
284
285 .content div.full{
286 background:#B3B3B6;
287 /*height:inherit;288 width:inherit;*/
289 }
290
291 .content .gw div.full{
292 width:0;
293 height:inherit;
294 }
295
296 .content .gh div.full{
297 height:0;
298 width:inherit;
299 }
300
301 .lTor{
302 -webkit-transition:all 0.5s linear;
303 -moz-transition:all 0.5s linear;
304 -ms-transition:all 0.5s linear;
305 -o-transition:all 0.5s linear;
306 transition:all 0.5s linear;
307
308 -webkit-animation:lToR 2s ease infinite;
309 -o-animation:lToR 2s ease infinite;
310 animation:lToR 2s ease infinite;
311 }
312
313 .content .f1-f2 .a1 span{
314 display:inline-block;
315 font-size:20px;
316 position:relative;
317 top:-26px;
318 left:-10px;
319 width:60px;
320 }
321
322 .content .f1-f2 .arrow{
323 left:330px;
324 top:-13.5px;
325 }
326
327 .content .f1-f2 .arrow span{
328 font-size:10px;
329 left:40px;
330 top:-3px;
331 position:relative;
332 }
333
334 .content .a1{
335 background-image:url(images/hospital/a1.png);
336 width:36.4px;
337 height:30.8px;
338 top:-15px;
339 left:55px;
340 }
341
342 .content .a1 b{
343 bottom:-20px;
344 left:-4px;
345 }
346
347 .pr20{
348 left:23px !important;
349 }
350
351 .content .gh{
352 content:"";
353 width:7px;
354 border-left:1px solid #83868C;
355 border-right:1px solid #83868C;
356 position:absolute;
357
358 background:#06192A;
359 }
360
361 .content .f2-s3{
362 left:790px;
363 top:135px;
364 height:150px;
365 }
366
367 .tTod{
368 -webkit-transition:all 0.5s linear;
369 -moz-transition:all 0.5s linear;
370 -ms-transition:all 0.5s linear;
371 -o-transition:all 0.5s linear;
372 transition:all 0.5s linear;
373
374 -webkit-animation:tTod 2s ease infinite;
375 -o-animation:tTod 2s ease infinite;
376 animation:tTod 2s ease infinite;
377 }
378
379 .content .s2-s5{
380 left:300px;
381 top:347px;
382 width:1050px;
383 }
384
385 .content .s2-t1{
386 left:495px;
387 top:355px;
388 height:125px;
389 }
390
391 .content .s2-t1-wl{
392 left:468px;
393 top:480px;
394 width:32px;
395
396 -webkit-transform:rotateY(-180deg);
397 -moz-transform:rotateY(-180deg);
398 -ms-transform:rotateY(-180deg);
399 -o-transform:rotateY(-180deg);
400 transform:rotateY(-180deg);
401 }
402
403 .content .s2-t1-wr{
404 left:500px;
405 top:480px;
406 width:32px;
407 }
408
409 .content .s2-t1-dl{
410 left:468px;
411 top:480px;
412 height:125px;
413 }
414
415 .content .s2-t1-dl .a1{
416 left:-16px;
417 top:40px;
418 }
419
420 .content .s2-t1-dl .a1 b.green{
421 left:-25px;
422 top:-8px;
423 }
424
425 .content .s2-t1-dl .a1 b.red{
426 left:-25px;
427 top:20px;
428 }
429
430 .content .s2-t1-dr{
431 left:523px;
432 top:480px;
433 height:125px;
434 }
435
436 .content .s2-t1-dr .a1{
437 left:-16px;
438 top:40px;
439 }
440
441 .content .s2-t1-dr .a1 b.green{
442 left:40px;
443 top:-8px;
444 }
445
446 .content .s2-t1-dr .a1 b.red{
447 left:40px;
448 top:20px;
449 }
450
451 .content .s3-t2{
452 top:363px;
453 width:5px;
454 height:125px;
455 }
456
457 .st-1{left:733px;}
458 .st-2{left:773px;}
459 .st-3{left:813px;}
460 .st-4{left:853px;}
461
462 .s3-t2-wl{
463 left:733px;
464 top:480px;
465 width:63.5px;
466 }
467
468 .s3-t2-wr{
469 left:797px;
470 top:480px;
471 width:63.5px;
472
473 -webkit-transform:rotateY(-180deg);
474 -moz-transform:rotateY(-180deg);
475 -ms-transform:rotateY(-180deg);
476 -o-transform:rotateY(-180deg);
477 transform:rotateY(-180deg);
478 }
479
480 .s3-t2-d{
481 left:792px;
482 top:481px;
483 height:125px;
484 }
485
486 .a2{
487 background-image:url("images/hospital/a2.jpg");
488 width:23px;
489 height:19px;
490 display:inline-block;
491 position:absolute;
492 top:57px;
493 left:-8px;
494 }
495
496 .a2:before{
497 font-size:20px;
498 position:relative;
499 left:-12px;
500 top:-4px;
501 }
502
503 .st-1 .a2:before{
504 content:"1";
505 }
506
507 .st-2 .a2:before{
508 content:"2";
509 }
510
511 .st-3 .a2:before{
512 content:"3";
513 }
514
515 .st-4 .a2:before{
516 content:"4";
517 }
518
519 .st-4 .a2:after{
520 content:"电磁阀";
521 font-size:20px;
522 position:absolute;
523 left:26px;
524 top:-4px;
525 width:60px;
526 }
527
528 .s3-t2 b{
529 margin-right:0 !important;
530 position:absolute !important;
531 top:80px;
532 left:-7px;
533 }
534
535 .arr{
536 position:absolute;
537 }
538
539 .arr img{
540 width:106.2px;
541 height:46.8px;
542 }
543
544 .s1 .arr{
545 -webkit-transform:rotate(90deg);
546 -moz-transform:rotate(90deg);
547 -ms-transform:rotate(90deg);
548 -o-transform:rotate(90deg);
549 transform:rotate(90deg);
550
551 left:calc(50% - 70px);
552 top:calc(50% - 25px);
553 }
554
555 .s5 .arr{
556 top:-16px;
557 }
558
559 .content .f1-f2 .arr{
560 right:-72px;
561 top:-27px;
562 }
563
564 .content .f1-f2 .arr span{
565 font-size:20px;
566 left:80px;
567 top:15px;
568 position:absolute;
569 width:80px;
570 }
571
572 /**/
573 .content .s2-t1-wl,.content .s2-t1-wl .full,574 .content .s2-t1-wr,.content .s2-t1-wr .full,575 .content .s2-t1-dr,.content .s2-t1-dr .full{
576 border-radius:0 10px 0 0;
577 }
578 .content .s2-t1-dl,.content .s2-t1-dl .full{
579 border-radius:10px 0 0 0;
580 }
581 .content .st-1,.content .st-1 .full,582 .content .s3-t2-wl,.content .s3-t2-wl .full,583 .content .s3-t2-wr,.content .s3-t2-wr .full{
584 border-radius:0 0 0 10px;
585 }
586 .content .st-4,.content .st-4 .full{
587 border-radius:0 0 10px 0;
588 }
589
590 @-webkit-keyframes lToR{
591 0% {width:0;}
592 100%{width:100%;}
593 }594
595 @-moz-keyframes lToR{
596 0% {width:0;}
597 100%{width:100%;}
598 }599
600 @-o-keyframes lToR{
601 0% {width:0;}
602 100%{width:100%;}
603 }604
605 @keyframes lToR{
606 0% {width:0;}
607 100%{width:100%;}
608 }609
610 @-webkit-keyframes tTod{
611 0% {height:0;}
612 100%{height:100%;}
613 }614
615 @-moz-keyframes tTod{
616 0% {height:0;}
617 100%{height:100%;}
618 }619
620 @-o-keyframes tTod{
621 0% {height:0;}
622 100%{height:100%;}
623 }624
625 @keyframes tTod{
626 0% {height:0;}
627 100%{height:100%;}
628 }629
630 .count{
631 position:absolute;
632 top:-38px;
633 right:60px;
634 }
635
636 .count span{
637 position:absolute;
638 left:-65px;
639 top:3px;
640 font-size:20px;
641 }
642
643 .count ul{
644 height:30px;
645 color:#ddd;
646 font-family:Consolas, monaco, monospace;
647 background:#000009;
648 margin:0 1px !important;
649 text-align:center;
650 list-style:none;
651 }
652
653 .count ul li{
654 font-size:20px;
655 width:18px;
656 height:26px;
657 margin-top:2px;
658 background:#1A2730;
659 /*font-weight:lighter;*/
660 float:left;
661 margin-left:1px;
662 }
663
664
665
666
667
668
污水处理系统
669
670
671
672
673
674
675
扫一扫
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
