HTML+CSS3 纯代码实现转盘效果
|
|
摘要：纯代码实现,没有引用一张图片,当然还是有改进的地方的
1 <!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:1350px;
/*border-bottom:2px solid #637382;*/
margin:0 auto;
/*padding-top:50px;
padding-left:98.5px;*/
display:inline-block;
padding-top: 50px;
padding-left: 170px;
}
.main section .round{
width:300px;
height:300px;
position: relative;
/*background:gray;*/
border-radius:50%;
margin-right: 150px;
margin-bottom: 30px;
float:left;
}
.main section .round ul{
list-style: none;
margin: 0;
padding: 0;
}
.main section .round ul.mark li{
width:2px;
height:18px;
display:block;
background:white;
position: absolute;
top:50%;
left:50%;
}
.main section .round ul.mark li:nth-child(odd){
height:26px;
top: calc(50% - 4px);
}
.digits::before{
width: 34px;
height: 34px;
position: absolute;
border-radius:50%;
top:calc(50% - 8px);
left:calc(50% - 17px);
content:"";
background:#003951;
}
.digits::after{
position: absolute;
top: 181px;
left: 137px;
content:"MPH";
font-size:12px;
font-weight:lighter;
opacity:0.5;
}
.main section .round ul.digits li{
font-size: 20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
line-height: 20px;
text-align: center;
font-weight: lighter;
}
.main section .round ul.digits li:nth-child(1){
transform: translate(-93px, 35px);
}
.main section .round ul.digits li:nth-child(2){
transform: translate(-95px, -25px);
}
.main section .round ul.digits li:nth-child(3){
transform: translate(-65px, -70px);
}
.main section .round ul.digits li:nth-child(4){
transform: translate(-18px, -90px);
}
.main section .round ul.digits li:nth-child(5){
transform: translate(45px, -70px);
}
.main section .round ul.digits li:nth-child(6){
transform: translate(60px, -25px);
}
.main section .round ul.digits li:nth-child(7){
transform: translate(68px, 35px);
}
.main section .round .hand{
width: .2em;
height: .2em;
background: #c00;
border-radius: 50%;
position: absolute;
top: 157px;
left: 148px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: rgba(0, 0, 0, .8) 0 0 .2em;
}
.main section .round .hand:before{
content: "";
width: .2em;
height: 128px;
border-radius: .2em .2em 0 0/10em 10em 0 0;
background: #c00;
position: absolute;
top: -127px;
left: .1em;
margin: 0 0 -2em -.1em;
}
.main section .round .digital{
position: absolute;
top: 225px;
left: 76px;
}
.main section .round .digital input,.main section .round .digital ul{
float:left;
}
.main section .round .digital ul{
width:20px;
height: 30px;
color: #ddd;
font-family: Consolas, monaco, monospace;
background:#000009;
margin:0 1px !important;
text-align:center;
overflow:hidden;
position: relative;
}
.main section .round .digital ul li{
width:18px;
height:26px;
margin-top:2px;
background:#1A2730;
/*font-weight:lighter;*/
position: relative;
overflow:hidden;
margin-left:1px;
}
.main section .round .digital ul.mph,.main section .round .digital ul.mph li{
background:none;
cursor: pointer;
overflow:visible;
}
.main section .round .digital ul.mph li{
height: 30px;
margin-top:0;
}
.main section .round .digital ul.mph b,.main section .round .digital ul.mph b:before,.main section .round .digital ul.mph span{
display:block;
position: relative;
}
.main section .round .digital ul.mph b{
width:16px;
height:16px;
border-radius:8px;
background:white;
top:-2px;
margin-left:2px;
}
.main section .round .digital ul.mph b.selected:before{
background:red;
width:12px;
height: 12px;
content:"";
border-radius:6px;
top:2px;
left:2px;
}
.main section .round .digital ul.mph span{
width:20px;
height:15px;
font-size:12px;
top:-6px;
}
.main section .round .digital ul.mph:first-child{
margin-right: 10px !important;
}
.main section .round .digital ul.mph:last-child{
margin-left: 10px !important;
}
.main section .round p{
position: absolute;
bottom:10px;
text-align:center;
width: 100%;
font-size:21px;
}
.main section .round .digital ul li span {
width: 20px;
height: 26px;
display: block;
position: relative;
top: -234px;
}
.main section .round .digital ul.d4/*:nth-child(4)*/ li{
/* -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;*/
}
#r1 .digital ul.d4 li{
top: -252px;
}
#r2 .digital ul.d4 li{
top: -168px;
}
#r3 .digital ul.d4 li{
top: -140px;
}
#r4 .digital ul.d3 li{
top: -84px;
}
#r4 .digital ul.d4 li{
top: -112px;
}
#r5 .digital ul.d4 li{
top: -112px;
}
#r6 .digital ul.d4 li{
top: -224px;
}
</style>
</head>
<body>
<div class="main">
<header>
<h1>心血管医用气体</h1>
</header>
<section>
<div class="round" id="r1" data-value="0.42">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氧气区域管线压力</p>
</div>
<div class="round" id="r2" data-value="0.43">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>压缩空气区域管线压力</p>
</div>
<div class="round" id="r3" data-value="0.44">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>CO2区域管线压力</p>
</div>
<div class="round" id="r4" data-value="0066">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>30</li>
<li>40</li>
<li>50</li>
<li style="transform:translate(-10px, -90px);">60</li>
<li>70</li>
<li style="transform:translate(75px, -25px);">80</li>
<li style="transform:translate(72px, 35px);">90</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul class="d3">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>真空区域管线压力</p>
</div>
<div class="round" id="r5" data-value="0.45">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>笑气区域管线压力</p>
</div>
<div class="round" id="r6" data-value="0.51">
<ul class="mark">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="digits">
<li>0.3</li>
<li>0.35</li>
<li>0.4</li>
<li>0.45</li>
<li>0.5</li>
<li>0.55</li>
<li>0.6</li>
</ul>
<div class="hand"></div>
<div class="digital">
<ul class="mph">
<li>
<b id="low" data-id="0"></b>
<span for="low">低</span>
</li>
</ul>
<ul>
<li>0</li>
</ul>
<ul>
<li>.</li>
</ul>
<ul>
<li>5</li>
</ul>
<ul class="d4">
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
<ul class="mph">
<li>
<b class="selected" id="hight" data-id="1"></b>
<span for="hight">高</span>
</li>
</ul>
</div>
<p>氮气区域管线压力</p>
</div>
</section>
</div>
</body>
<script>
$(".round").each(function(){
var deg = -110;
$(this).find("ul.mark li").each(function(){
var ty = "-120px";
if($(this).index() % 2 == 0){
ty = "-115px";
}
$(this).css("transform","rotate("+deg+"deg) translateY("+ty+")");
deg += 220 / 24;
});
});
$(".digital").find("ul:not(.mph):last").click(function(){
});
function getDeg(num){
return -110 + 220 / 24 * (num - 1);
}
var dig = 28;
//---------r1---------
var r1_deg = getDeg(9);
$("#r1").find(".hand")
.css("transform","rotate("+r1_deg+"deg)");
var r1_status = false;
setTimeout(function(){
var r1 = $("#r1");
r1_status = null;
var new_r1_deg = getDeg(13)
r1.find(".hand").css("transform","rotate("+new_r1_deg+"deg)");
var num = r1.find(".d4 li").css("top");
num = num.substring(0,num.length - 2);
//r1.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r1.find(".d4 li").animate({
top: parseInt(num) + 28 * 5 + "px"
},1500);
}, 3000);
setTimeout(function(){
r1_status = true;
},5000);
setInterval(function(){
if(r1_status == null){return;}
var r1 = $("#r1").find(".hand")[0];
var r1_deg = r1.style.cssText;
var n = r1_deg.substring(18,r1_deg.length - 5);
n = r1_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r1.style.cssText = "transform:rotate("+n+"deg)";
r1_status = !r1_status;
},500);
//---------r2---------
$("#r2").find(".hand")
.css("transform","rotate(-12.5deg)");
var r2_status = false;
setTimeout(function(){
var r2 = $("#r2");
r2_status = null;
var new_r2_deg = getDeg(9)
r2.find(".hand").css("transform","rotate("+new_r2_deg+"deg)");
var num = r2.find(".d4 li").css("top");
num = num.substring(0,num.length - 2);
//r2.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r2.find(".d4 li").animate({
top: parseInt(num) - 28 * 3 + "px"
},1500);
}, 5000);
setTimeout(function(){
r2_status = true;
},6000);
setInterval(function(){
if(r2_status == null){return;}
var r2 = $("#r2").find(".hand")[0];
var r2_deg = r2.style.cssText;
var n = r2_deg.substring(18,r2_deg.length - 5);
n = r2_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r2.style.cssText = "transform:rotate("+n+"deg)";
r2_status = !r2_status;
},500);
//---------r3---------
$("#r3").find(".hand")
.css("transform","rotate(-3.9deg)");
var r3_status = false;
//*
setInterval(function(){
if(r3_status == null){return;}
var r3 = $("#r3").find(".hand")[0];
var r3_deg = r3.style.cssText;
var n = r3_deg.substring(18,r3_deg.length - 5);
n = r3_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r3.style.cssText = "transform:rotate("+n+"deg)";
r3_status = !r3_status;
},500);//*/
//---------r4---------
var r4_deg = getDeg(15);
$("#r4").find(".hand")
.css("transform","rotate("+r4_deg+"deg)");
var r4_status = true;
setTimeout(function(){
var r4 = $("#r4");
r4_status = null;
var new_r4_deg = getDeg(17)
r4.find(".hand").css("transform","rotate("+new_r4_deg+"deg)");
var num = r4.find(".d4 li").css("top");
num = num.substring(0,num.length - 2);
//r4.find(".d4 li").css("top",parseInt(num) + 28 * i + "px");
r4.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1000, function() {
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2);
r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px");
r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px");
r4_status = false;
});
}, 7000);
/*
setTimeout(function(){
var r4 = $("#r4");
var d3 = r4.find(".d3 li").css("top");
d3 = d3.substring(0,d3.length - 2);
r4.find(".d4 li").stop();
r4.find(".d4 li").css("top","-252px");
r4.find(".d3 li").css("top",parseInt(d3) + 28 + "px");
}, 6000);
*/
//*
setInterval(function(){
if(r4_status == null){return;}
var r4 = $("#r4").find(".hand")[0];
var r4_deg = r4.style.cssText;
var n = r4_deg.substring(18,r4_deg.length - 5);
n = r4_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r4.style.cssText = "transform:rotate("+n+"deg)";
r4_status = !r4_status;
},500);//*/
var r5_deg = getDeg(13);
$("#r5").find(".hand")
.css("transform","rotate("+r5_deg+"deg)");
var r5_status = false;
//*
setInterval(function(){
if(r5_status == null){return;}
var r5 = $("#r5").find(".hand")[0];
var r5_deg = r5.style.cssText;
var n = r5_deg.substring(18,r5_deg.length - 5);
n = r5_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r5.style.cssText = "transform:rotate("+n+"deg)";
r5_status = !r5_status;
},500);//*/
var r6_deg = getDeg(17);
$("#r6").find(".hand")
.css("transform","rotate(42.666667deg)");
var r6_status = false;
setTimeout(function(){
var r6 = $("#r6");
r6_status = null;
var new_r6_deg = getDeg(21)
r6.find(".hand").css("transform","rotate("+new_r6_deg+"deg)");
var num = r6.find(".d4 li").css("top");
num = num.substring(0,num.length - 2);
//r6.find(".d4 li").css("top",parseInt(num) + 28 * 5 + "px");
r6.find(".d4 li").animate({
top: parseInt(num) + 28 * 4 + "px"
},1500);
}, 9000);
setTimeout(function(){
r6_status = true;
},10000);
//*
setInterval(function(){
if(r6_status == null){return;}
var r6 = $("#r6").find(".hand")[0];
var r6_deg = r6.style.cssText;
var n = r6_deg.substring(18,r6_deg.length - 5);
n = r6_status ? parseFloat(n) + 2 : parseFloat(n) - 2;
r6.style.cssText = "transform:rotate("+n+"deg)";
r6_status = !r6_status;
},500);//*/
</script>
</html>
