HTML+CSS 实现水流流动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="/Scripts/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="">
<style>
*{
padding:0;
margin:0;
font: 24px/24px "Microsoft Yahei";
color:white;
}
body{
background:#202020;
}
.main{
width: 1520px;
height:900px;
background:#06192A;
margin:0 auto;
border:2px solid white;
}
.main header{
height: 150px;
border-bottom:2px solid #637382;
}
.main header h1{
text-align:center;
font-weight:bolder;
position: relative;
bottom:0;
padding-top: 104px;
}
.main section{
/*width:1296px;*/
height:500px;
margin:0 auto;
} .main section .title{
display:inline-block;
height:30px;
line-height:30px;
padding-top:20px;
width: 100%;
} .main section b.radio,.main section b.radio:before{
display:block;
position: relative;
}
.main section b.radio{
width:16px;
height:16px;
border-radius:8px;
background:white;
margin-left:2px; float:right;
margin-right:68px;
} .main section b.green:before,.main section b.red:before,.main section b.yellow:before{
width:12px;
height: 12px;
content:"";
border-radius:6px;
top:2px;
left:2px;
} .main section b.green:before{
background:#008F40;
} .main section b.red:before{
background:#D10F12;
} .main section b.yellow:before{
background:#F4A700;
} .main section b.green:after,.main section b.red:after,.main section b.yellow:after{
display:block;
width:40px;
font-size:20px;
position: relative;
top:-17px;
left:-47px;
} .main section .title b.green:after{
content:"运行";
}
.main section .title b.red:after{
content:"故障";
}
.main section .title b.yellow:after{
content:"报警";
} .content{
display:inline-block;
position: relative;
width: 100%;
height: 100%;
} .content .bg b{
position: absolute !important;
margin-right:15px !important;
} .content .s1{
background-image:url(images/hospital/s1.png);
width:368.4px;
height: 412.8px;
} .content .s1 .arrow{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
top: 92px;
left: 57px;
} .content .s1 b{
bottom: 24px;
right: 70px;
} .content .s2{
background-image:url(images/hospital/s2.png);
width: 250.2px;
height: 208.2px;
left: 380px;
top: 216px;
} .content .s2 b,.content .s3 b,.content .s4 b{
bottom: 35px;
right: 35px;
} .content .s3{
background-image:url(images/hospital/s3.png);
width: 250.2px;
height: 208.2px;
left: 680px;
top: 216px;
} .content .s4{
background-image:url(images/hospital/s4.png);
width: 250.2px;
height: 208.2px;
left: 980px;
top: 216px;
} .content .s5{
background-image:url(images/hospital/s5.png);
width: 202.15px;
height: 113.75px;
left: 1270px;
top: 300px;
} .content .s5 span{
font-size:20px;
position: relative;
left: 80px;
} .content .arrow{
background-image:url(images/hospital/arrow.png);
width:53.1px;
height: 23.4px;
zoom:2 !important;
top: -8px;
left:1px;
} .content .f1{
background-image:url(images/hospital/f1.png);
width: 171.6px;
height: 163.8px;
top: 33px;
left: 416px;
} .content .f1 b{
bottom:53px;
left:-24px;
} .content .f1 b:after{
content:"余氮值";
width: 60px !important;
left:-21px !important;
top: -40px !important;
} .content .f2{
background-image:url(images/hospital/f2.png);
width: 250.2px;
height: 208.2px;
top: 0;
left: 680px;
} .content .t1{
background-image:url(images/hospital/f1.png);
width: 171.6px;
height: 163.8px;
top: 530px;
left: 416px;
} .content .t2{
background-image:url(images/hospital/t2.png);
width: 182px;
height: 140.25px;
top: 530px;
left: 701px;
} .content .t2 b{
right: -16px;
top: 65px;
} .pt92{
top:92px !important;
} .content .bg{
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
-o-background-size: cover;/* 兼容Opera */
zoom: 1;
position: absolute;
z-index: 2;
} .pr48{
right:48px !important;
}
.pb33{
bottom:33px !important;
}
.pr12{
right:12px !important;
}
.pb44{
bottom:44px !important;
} .content .gw{
content:"";
height: 7px;
border-top:1px solid #83868C;
border-bottom:1px solid #83868C;
position: absolute; background:#06192A;
} .content .f1-f2{
left: 544px;
top: 135px;
width:693px;
} .content div.full{
background:#B3B3B6;
/*height:inherit;
width:inherit;*/
} .content .gw div.full{
width:0;
height:inherit;
} .content .gh div.full{
height:0;
width:inherit;
} .lTor{
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear; -webkit-animation: lToR 2s ease infinite;
-o-animation: lToR 2s ease infinite;
animation: lToR 2s ease infinite;
} .content .f1-f2 .a1 span{
display: inline-block;
font-size: 20px;
position: relative;
top: -26px;
left: -10px;
width: 60px;
} .content .f1-f2 .arrow{
left: 330px;
top: -13.5px;
} .content .f1-f2 .arrow span{
font-size:10px;
left: 40px;
top: -3px;
position: relative;
} .content .a1{
background-image:url(images/hospital/a1.png);
width: 36.4px;
height: 30.8px;
top: -15px;
left: 55px;
} .content .a1 b{
bottom:-20px;
left:-4px;
} .pr20{
left:23px !important;
} .content .gh{
content:"";
width: 7px;
border-left:1px solid #83868C;
border-right:1px solid #83868C;
position: absolute; background:#06192A;
} .content .f2-s3{
left: 790px;
top: 135px;
height:150px;
} .tTod{
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear; -webkit-animation: tTod 2s ease infinite;
-o-animation: tTod 2s ease infinite;
animation: tTod 2s ease infinite;
} .content .s2-s5{
left: 300px;
top: 347px;
width:1050px;
} .content .s2-t1{
left: 495px;
top: 355px;
height: 125px;
} .content .s2-t1-wl{
left: 468px;
top: 480px;
width: 32px; -webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
} .content .s2-t1-wr{
left: 500px;
top: 480px;
width: 32px;
} .content .s2-t1-dl{
left: 468px;
top: 480px;
height:125px;
} .content .s2-t1-dl .a1{
left: -16px;
top: 40px;
} .content .s2-t1-dl .a1 b.green{
left: -25px;
top: -8px;
} .content .s2-t1-dl .a1 b.red{
left: -25px;
top: 20px;
} .content .s2-t1-dr{
left: 523px;
top: 480px;
height:125px;
} .content .s2-t1-dr .a1{
left: -16px;
top: 40px;
} .content .s2-t1-dr .a1 b.green{
left: 40px;
top: -8px;
} .content .s2-t1-dr .a1 b.red{
left: 40px;
top: 20px;
} .content .s3-t2{
top: 363px;
width:5px;
height:125px;
} .st-1{left: 733px;}
.st-2{left: 773px;}
.st-3{left: 813px;}
.st-4{left: 853px;} .s3-t2-wl{
left: 733px;
top: 480px;
width: 63.5px;
} .s3-t2-wr{
left: 797px;
top: 480px;
width: 63.5px; -webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
} .s3-t2-d{
left: 792px;
top: 481px;
height: 125px;
} .a2{
background-image:url("images/hospital/a2.jpg");
width: 23px;
height: 19px;
display: inline-block;
position: absolute;
top: 57px;
left: -8px;
} .a2:before{
font-size:20px;
position: relative;
left: -12px;
top: -4px;
} .st-1 .a2:before{
content:"1";
} .st-2 .a2:before{
content:"2";
} .st-3 .a2:before{
content:"3";
} .st-4 .a2:before{
content:"4";
} .st-4 .a2:after{
content:"电磁阀";
font-size:20px;
position: absolute;
left: 26px;
top: -4px;
width: 60px;
} .s3-t2 b{
margin-right:0 !important;
position: absolute !important;
top: 80px;
left: -7px;
} .arr{
position: absolute;
} .arr img{
width: 106.2px;
height: 46.8px;
} .s1 .arr{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); left: calc(50% - 70px);
top: calc(50% - 25px);
} .s5 .arr{
top:-16px;
} .content .f1-f2 .arr{
right: -72px;
top: -27px;
} .content .f1-f2 .arr span{
font-size:20px;
left: 80px;
top: 15px;
position: absolute;
width: 80px;
} /**/
.content .s2-t1-wl,.content .s2-t1-wl .full,
.content .s2-t1-wr,.content .s2-t1-wr .full,
.content .s2-t1-dr,.content .s2-t1-dr .full{
border-radius: 0 10px 0 0;
}
.content .s2-t1-dl,.content .s2-t1-dl .full{
border-radius:10px 0 0 0;
}
.content .st-1,.content .st-1 .full,
.content .s3-t2-wl,.content .s3-t2-wl .full,
.content .s3-t2-wr,.content .s3-t2-wr .full{
border-radius: 0 0 0 10px;
}
.content .st-4,.content .st-4 .full{
border-radius: 0 0 10px 0;
} @-webkit-keyframes lToR{
0% {width:0;}
100% {width:100%;}
} @-moz-keyframes lToR{
0% {width:0;}
100% {width:100%;}
} @-o-keyframes lToR{
0% {width:0;}
100% {width:100%;}
} @keyframes lToR{
0% {width:0;}
100% {width:100%;}
} @-webkit-keyframes tTod{
0% {height:0;}
100% {height:100%;}
} @-moz-keyframes tTod{
0% {height:0;}
100% {height:100%;}
} @-o-keyframes tTod{
0% {height:0;}
100% {height:100%;}
} @keyframes tTod{
0% {height:0;}
100% {height:100%;}
} .count{
position: absolute;
top: -38px;
right: 60px;
} .count span {
position: absolute;
left: -65px;
top: 3px;
font-size: 20px;
} .count ul{
height: 30px;
color: #ddd;
font-family: Consolas, monaco, monospace;
background:#000009;
margin:0 1px !important;
text-align:center;
list-style: none;
} .count ul li{
font-size: 20px;
width:18px;
height:26px;
margin-top:2px;
background:#1A2730;
/*font-weight:lighter;*/
float:left;
margin-left:1px;
}
</style>
</head>
<body>
<div class="main">
<header>
<h1>污水处理系统</h1>
</header>
<section>
<div class="title">
<b class="radio yellow"></b>
<b class="radio red"></b>
<b class="radio green"></b>
</div>
<div class="content">
<div class="f1 bg">
<b class="radio yellow"></b>
</div>
<div class="f2 bg">
</div>
<div class="s1 bg">
<!-- <div class="arrow bg"></div> -->
<div class="arr">
<img src="data:images/hospital/arrow.png" alt="">
</div>
<b class="radio red pr48 pb33"></b>
<b class="radio green"></b>
</div>
<div class="s2 bg">
<b class="radio red pr12 pb44"></b>
<b class="radio green"></b>
</div>
<div class="s3 bg">
<b class="radio red pr12 pb44"></b>
<b class="radio green"></b>
</div>
<div class="s4 bg">
<b class="radio red pr12 pb44"></b>
<b class="radio green"></b>
</div>
<div class="s5 bg">
<!-- <div class="arrow bg"></div> -->
<div class="arr">
<img src="data:images/hospital/arrow.png" alt="">
</div>
<span>环卫车外运</span>
</div>
<div class="t1 bg">
</div>
<div class="t2 bg">
<b class="radio red pt92"></b>
<b class="radio green"></b>
</div>
<div class="gw f1-f2">
<div class="full"></div>
<!-- <div class="arrow bg">
<span>达标排外</span>
</div> -->
<div class="arr">
<img src="data:images/hospital/arrow.png" alt="">
<span>达标排外</span>
</div> <div class="count">
<span>总流量</span>
<ul>
<li>0</li>
<li>4</li>
<li>3</li>
<li>5</li>
<li>0</li>
<li>.</li>
<li>4</li>
<li>6</li>
<li>1</li>
</ul>
</div> <div class="a1 bg">
<span>加药泵</span>
<b class="radio red pr20"></b>
<b class="radio green"></b>
</div>
</div>
<div class="gh f2-s3">
<div class="full"></div>
</div>
<div class="gw s2-s5">
<div class="full"></div>
</div>
<!-- 多个一组 -->
<div class="gh s2-t1">
<div class="full"></div>
</div>
<div class="gw s2-t1-wl">
<div class="full"></div>
</div>
<div class="gw s2-t1-wr">
<div class="full"></div>
</div>
<div class="gh s2-t1-dl">
<div class="full"></div>
<div class="a1 bg">
<b class="radio red"></b>
<b class="radio green"></b>
</div>
</div>
<div class="gh s2-t1-dr">
<div class="full"></div>
<div class="a1 bg">
<b class="radio red"></b>
<b class="radio green"></b>
</div>
</div>
<!-- 多个一组 -->
<div class="gh s3-t2 st-1">
<div class="full"></div>
<span class="a2"></span>
<b class="radio green"></b>
</div>
<div class="gh s3-t2 st-2">
<div class="full"></div>
<span class="a2"></span>
<b class="radio green"></b>
</div>
<div class="gh s3-t2 st-3">
<div class="full"></div>
<span class="a2"></span>
<b class="radio green"></b>
</div>
<div class="gh s3-t2 st-4">
<div class="full"></div>
<span class="a2"></span>
<b class="radio green"></b>
</div>
<div class="gw s3-t2-wl">
<div class="full"></div>
</div>
<div class="gw s3-t2-wr">
<div class="full"></div>
</div>
<div class="gh s3-t2-d">
<div class="full"></div>
</div>
</div>
</section>
</div>
</body>
<script>
$(function(){
var count = 0;
//*
var a = setInterval(function(){
$(".f1-f2").find(".full").animate({
width: "100%"
},2000, function() {
}); $(".f2-s3").find(".full").delay("500").animate({
height: "100%"
},500, function() {
}); var c = $(".s2-s5").find(".full");
if(!c.is(":animated")){
$(".s2-s5").find(".full").animate({
width: "100%"
},2500, function() {
if(count == 6){
clearInterval(a);
return;
} $(".f1-f2").find(".full").css("width",0);
$(".s2-s5").find(".full").css("width",0);
$(".s2-t1-wl,.s2-t1-wr").find(".full").css("width",0);
$(".s3-t2-wl,.s3-t2-wr").find(".full").css("width",0); $(".f2-s3").find(".full").css("height",0);
$(".s2-t1").find(".full").css("height",0);
$(".s2-t1-dl,.s2-t1-dr").find(".full").css("height",0);
$(".s3-t2").find(".full").css("height",0);
$(".s3-t2-d").find(".full").css("height",0); count += 1;
});
} $(".s2-t1").find(".full").delay(500).animate({
height: "100%"
},500, function() {
}); $(".s2-t1-wl,.s2-t1-wr").find(".full").delay(1000).animate({
width: "100%"
},100, function() {
});
$(".s2-t1-dl,.s2-t1-dr").find(".full").delay(1100).animate({
height: "100%"
},500, function() {
}); $(".s3-t2").find(".full").delay(1000).animate({
height: "100%"
},500, function() { }); $(".s3-t2-wl,.s3-t2-wr").find(".full").delay(1500).animate({
width: "100%"
},200, function() { }); $(".s3-t2-d").find(".full").delay(1700).animate({
height: "100%"
},500,function(){ });
}, 3000);
//*/
});
</script>
</html>
HTML+CSS 实现水流流动效果的更多相关文章
- 基于HTML5实现3D监控应用流动效果
http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 流动效果在3D领域有着广泛的应用场景,如 ...
- HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
- 原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- CSS实现两端对齐效果
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
随机推荐
- HDU 2063 过山车(二分匹配入门)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 二分匹配最大匹配数简单题,匈牙利算法.学习二分匹配传送门:http://blog.csdn.ne ...
- Java日期处理类
1.Date java.util.Date 2.Calendar 日历类,通过getInstance()获取实例对象,可以获取年月日时分秒 3.SimpleDateFormat 日期格式化,forma ...
- ASP.NET MVC- 使用PageList.Mvc分页
ASP.NET MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList.PagedList.Mvc进行分页. 1. 通过NuGet引用PagedList.Mvc 在安装引用Paged ...
- Proactor设计模式：单线程高并发
Boost::Asio为同步和异步操作提供了并行支持,异步支持基于前摄器模式,这种模式的优点和缺点可能比只同步或反应器方法要低. 让我们检查一下Boost::Asio是如何实现前摄器模式的,没有引用基 ...
- Realsense 提取彩色和深度视频流
一.简要介绍 关于realsense的介绍,网上很多,这里不再赘述,sdk及相关文档可参考realsense SDK,也可参考开发人员专区. 运行代码之前,要确保你已经安装好了realsense的DC ...
- 正则表达式（Regular Expression）
匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^\x00-\xff] 评注:可以用来计算字符串的 ...
- Hadoop on Mac with IntelliJ IDEA - 3 解决MRUnit - No applicable class implementing Serialization问题
本文讲述在IntelliJ IDEA中使用MRUnit 1.0.0测试Mapper派生类时因MapDriver.withInput(final K1 key, final V1 val)的key参数被 ...
- IOS Note - Outlet(插座) & Action(动作)
OutletActionViewController.h #import <UIKit/UIKit.h> @interface OutletActionViewController : U ...
- utf-8 和gbk编码的差别
UTF- 8: 是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24为(三个字节)来编码. GBK 是国家标准GB2312基础上扩容后兼容GB2312的标准. GBK的文 ...
- 谷歌插件开发（实现CSDN快速登陆）
谷歌浏览器插件带来了很大的方便,于是就想着是不是也可以开发一个来用用.几经折腾下,开发了个CSDN快速 登陆的插件.下面简述一下开发的步骤. 1.开发工具:谷歌浏览器(我开发时用的是chrome 30 ...