码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS 实现水流流动效果

时间:2015-07-13 11:46:58      阅读:3808      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
  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>
View Code

技术分享

HTML+CSS 实现水流流动效果

标签:

原文地址:http://www.cnblogs.com/numver/p/4642369.html

(2)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!