你的位置:首页 > 网页设计

[网页设计]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="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/hospital/arrow.png" alt="">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/hospital/arrow.png" alt="">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/hospital/arrow.png" alt="">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