html css 水流动,HTML+CSS实现水流流动效果_html/css_WEB-ITnose

1

2

3

4

5

6

7

8

9

10

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 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

664

665

666

667

668

污水处理系统

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707 环卫车外运

708

709

710

711

712

713

714

715

716

717

720

721

722 达标排外

723

724

725

726 总流量

727

728

0

729

4

730

3

731

5

732

0

733

.

734

4

735

6

736

1

737

738

739

740

741 加药泵

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

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 885

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网