这篇“HTML+CSS如何实现水流流动效果”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“HTML+CSS如何实现水流流动效果”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。
实现源码：
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 h2{
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 <h2>污水处理系统</h2>
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>感谢你的阅读，希望你对“HTML+CSS如何实现水流流动效果”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
