Home >Web Front-end >HTML Tutorial >HTML CSS to achieve water flow effect_html/css_WEB-ITnose
HTML CSS to achieve water flow effect_html/css_WEB-ITnose
- ringa_leeOriginal
- 2018-05-12 17:35:336877browse
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title></title>
7 <script src="/Scripts/jquery-1.10.2.min.js"></script>
8
9 <link rel="stylesheet" href="">
10 <style>
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 2
56 .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 p.full{
286 background:#B3B3B6;
287 /*height:inherit;
288 width:inherit;*/
289 }
290
291 .content .gw p.full{
292 width:0;
293 height:inherit;
294 }
295
296 .content .gh p.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 </style>
664 </head>
665 <body>
666 <p class="main">
667 <header>
668 <h1>污水处理系统</h1>
669 </header>
670 <section>
671 <p class="title">
672 <b class="radio yellow"></b>
673 <b class="radio red"></b>
674 <b class="radio green"></b>
675 </p>
676 <p class="content">
677 <p class="f1 bg">
678 <b class="radio yellow"></b>
679 </p>
680 <p class="f2 bg">
681 </p>
682 <p class="s1 bg">
683 <!-- <p class="arrow bg"></p> -->
684 <p class="arr">
685 <img src="images/hospital/arrow.png" alt="">
686 </p>
687 <b class="radio red pr48 pb33"></b>
688 <b class="radio green"></b>
689 </p>
690 <p class="s2 bg">
691 <b class="radio red pr12 pb44"></b>
692 <b class="radio green"></b>
693 </p>
694 <p class="s3 bg">
695 <b class="radio red pr12 pb44"></b>
696 <b class="radio green"></b>
697 </p>
698 <p class="s4 bg">
699 <b class="radio red pr12 pb44"></b>
700 <b class="radio green"></b>
701 </p>
702 <p class="s5 bg">
703 <!-- <p class="arrow bg"></p> -->
704 <p class="arr">
705 <img src="images/hospital/arrow.png" alt="">
706 </p>
707 <span>环卫车外运</span>
708 </p>
709 <p class="t1 bg">
710 </p>
711 <p class="t2 bg">
712 <b class="radio red pt92"></b>
713 <b class="radio green"></b>
714 </p>
715 <p class="gw f1-f2">
716 <p class="full"></p>
717 <!-- <p class="arrow bg">
718 <span>达标排外</span>
719 </p> -->
720 <p class="arr">
721 <img src="images/hospital/arrow.png" alt="">
722 <span>达标排外</span>
723 </p>
724
725 <p class="count">
726 <span>总流量</span>
727 <ul>
728 <li>0</li>
729 <li>4</li>
730 <li>3</li>
731 <li>5</li>
732 <li>0</li>
733 <li>.</li>
734 <li>4</li>
735 <li>6</li>
736 <li>1</li>
737 </ul>
738 </p>
739
740 <p class="a1 bg">
741 <span>加药泵</span>
742 <b class="radio red pr20"></b>
743 <b class="radio green"></b>
744 </p>
745 </p>
746 <p class="gh f2-s3">
747 <p class="full"></p>
748 </p>
749 <p class="gw s2-s5">
750 <p class="full"></p>
751 </p>
752 <!-- 多个一组 -->
753 <p class="gh s2-t1">
754 <p class="full"></p>
755 </p>
756 <p class="gw s2-t1-wl">
757 <p class="full"></p>
758 </p>
759 <p class="gw s2-t1-wr">
760 <p class="full"></p>
761 </p>
762 <p class="gh s2-t1-dl">
763 <p class="full"></p>
764 <p class="a1 bg">
765 <b class="radio red"></b>
766 <b class="radio green"></b>
767 </p>
768 </p>
769 <p class="gh s2-t1-dr">
770 <p class="full"></p>
771 <p class="a1 bg">
772 <b class="radio red"></b>
773 <b class="radio green"></b>
774 </p>
775 </p>
776 <!-- 多个一组 -->
777 <p class="gh s3-t2 st-1">
778 <p class="full"></p>
779 <span class="a2"></span>
780 <b class="radio green"></b>
781 </p>
782 <p class="gh s3-t2 st-2">
783 <p class="full"></p>
784 <span class="a2"></span>
785 <b class="radio green"></b>
786 </p>
787 <p class="gh s3-t2 st-3">
788 <p class="full"></p>
789 <span class="a2"></span>
790 <b class="radio green"></b>
791 </p>
792 <p class="gh s3-t2 st-4">
793 <p class="full"></p>
794 <span class="a2"></span>
795 <b class="radio green"></b>
796 </p>
797 <p class="gw s3-t2-wl">
798 <p class="full"></p>
799 </p>
800 <p class="gw s3-t2-wr">
801 <p class="full"></p>
802 </p>
803 <p class="gh s3-t2-d">
804 <p class="full"></p>
805 </p>
806 </p>
807 </section>
808 </p>
809 </body>
810 <script>
811 $(function(){
812 var count = 0;
813 //*
814 var a = setInterval(function(){
815 $(".f1-f2").find(".full").animate({
816 width: "100%"
817 },2000, function() {
818 });
819
820 $(".f2-s3").find(".full").delay("500").animate({
821 height: "100%"
822 },500, function() {
823 });
824
825 var c = $(".s2-s5").find(".full");
826 if(!c.is(":animated")){
827 $(".s2-s5").find(".full").animate({
828 width: "100%"
829 },2500, function() {
830 if(count == 6){
831 clearInterval(a);
832 return;
833 }
834
835 $(".f1-f2").find(".full").css("width",0);
836 $(".s2-s5").find(".full").css("width",0);
837 $(".s2-t1-wl,.s2-t1-wr").find(".full").css("width",0);
838 $(".s3-t2-wl,.s3-t2-wr").find(".full").css("width",0);
839
840 $(".f2-s3").find(".full").css("height",0);
841 $(".s2-t1").find(".full").css("height",0);
842 $(".s2-t1-dl,.s2-t1-dr").find(".full").css("height",0);
843 $(".s3-t2").find(".full").css("height",0);
844 $(".s3-t2-d").find(".full").css("height",0);
845
846 count += 1;
847 });
848 }
849
850 $(".s2-t1").find(".full").delay(500).animate({
851 height: "100%"
852 },500, function() {
853 });
854
855 $(".s2-t1-wl,.s2-t1-wr").find(".full").delay(1000).animate({
856 width: "100%"
857 },100, function() {
858 });
859 $(".s2-t1-dl,.s2-t1-dr").find(".full").delay(1100).animate({
860 height: "100%"
861 },500, function() {
862 });
863
864 $(".s3-t2").find(".full").delay(1000).animate({
865 height: "100%"
866 },500, function() {
867
868 });
869
870 $(".s3-t2-wl,.s3-t2-wr").find(".full").delay(1500).animate({
871 width: "100%"
872 },200, function() {
873
874 });
875
876 $(".s3-t2-d").find(".full").delay(1700).animate({
877 height: "100%"
878 },500,function(){
879
880 });
881 }, 3000);
882 //*/
883 });
884 </script>885 </html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn