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='/images/loading.gif' data-original="http://www.cnblogs.com//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 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 </style>664 </head>665 <body>666 <div class="main">667 <header>668 <h1>污水处理系统</h1>669 </header>670 <section>671 <div class="title">672 <b class="radio yellow"></b>673 <b class="radio red"></b>674 <b class="radio green"></b>675 </div>676 <div class="content">677 <div class="f1 bg">678 <b class="radio yellow"></b>679 </div>680 <div class="f2 bg">681 </div>682 <div class="s1 bg">683 <!-- <div ></div> -->684 <div class="arr">685 <img src='/images/loading.gif' data-original="images/hospital/arrow.png" >686 </div>687 <b class="radio red pr48 pb33"></b>688 <b class="radio green"></b>689 </div>690 <div class="s2 bg">691 <b class="radio red pr12 pb44"></b>692 <b class="radio green"></b>693 </div>694 <div class="s3 bg">695 <b class="radio red pr12 pb44"></b>696 <b class="radio green"></b>697 </div>698 <div class="s4 bg">699 <b class="radio red pr12 pb44"></b>700 <b class="radio green"></b>701 </div>702 <div class="s5 bg">703 <!-- <div ></div> -->704 <div class="arr">705 <img src='/images/loading.gif' data-original="images/hospital/arrow.png" >706 </div>707 <span>环卫车外运</span>708 </div>709 <div class="t1 bg">710 </div>711 <div class="t2 bg">712 <b class="radio red pt92"></b>713 <b class="radio green"></b>714 </div>715 <div class="gw f1-f2">716 <div class="full"></div>717 <!-- <div >718 <span>达标排外</span>719 </div> -->720 <div class="arr">721 <img src='/images/loading.gif' data-original="images/hospital/arrow.png" >722 <span>达标排外</span>723 </div>724 725 <div 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 </div>739 740 <div class="a1 bg">741 <span>加药泵</span>742 <b class="radio red pr20"></b>743 <b class="radio green"></b>744 </div>745 </div>746 <div class="gh f2-s3">747 <div class="full"></div>748 </div>749 <div class="gw s2-s5">750 <div class="full"></div>751 </div>752 <!-- 多个一组 -->753 <div class="gh s2-t1">754 <div class="full"></div>755 </div>756 <div class="gw s2-t1-wl">757 <div class="full"></div>758 </div>759 <div class="gw s2-t1-wr">760 <div class="full"></div>761 </div>762 <div class="gh s2-t1-dl">763 <div class="full"></div>764 <div class="a1 bg">765 <b class="radio red"></b>766 <b class="radio green"></b>767 </div>768 </div>769 <div class="gh s2-t1-dr">770 <div class="full"></div>771 <div class="a1 bg">772 <b class="radio red"></b>773 <b class="radio green"></b>774 </div>775 </div>776 <!-- 多个一组 -->777 <div class="gh s3-t2 st-1">778 <div class="full"></div>779 <span class="a2"></span>780 <b class="radio green"></b>781 </div>782 <div class="gh s3-t2 st-2">783 <div class="full"></div>784 <span class="a2"></span>785 <b class="radio green"></b>786 </div>787 <div class="gh s3-t2 st-3">788 <div class="full"></div>789 <span class="a2"></span>790 <b class="radio green"></b>791 </div>792 <div class="gh s3-t2 st-4">793 <div class="full"></div>794 <span class="a2"></span>795 <b class="radio green"></b>796 </div>797 <div class="gw s3-t2-wl">798 <div class="full"></div>799 </div>800 <div class="gw s3-t2-wr">801 <div class="full"></div>802 </div>803 <div class="gh s3-t2-d">804 <div class="full"></div>805 </div>806 </div>807 </section>808 </div>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>View Code
原标题：HTML+CSS 实现水流流动效果
关键词：HTML
我知道了 