标签：
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 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 class="arrow bg"></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 class="arrow bg"></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 class="arrow bg"> 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>
标签：
原文地址：http://www.cnblogs.com/numver/p/4642369.html
