鉴于此:
created_at
var hoursStart = (7 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (10 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");
.clock {
border: 5px solid #FFF;
background-color: #e84c3d;
border-radius: 100%;
display: block;
height: 250px;
width: 250px;
position: relative;
}
.clock .start {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
.clock .end {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
创建此圈子:
我尝试过这段代码,但这不符合我的要求:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
<div class="start"></div>
<div class="end"></div>
</div>
$(".clock")
.css("background-color", "blue")
.css("background-image",
"linear-gradient(" + hoursStart +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd +"deg, #e74c3c 50%, transparent 50%)");
// These fields come from server
var start_hour = 8;
var end_hour = 10;
var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");
var start = hoursStart - 60;
var end = hoursEnd + 60;
$(".clock")
.css("background-color", "blue")
.css("background-image",
"linear-gradient(" + hoursStart + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd + "deg, #e74c3c 50%, transparent 50%)");
body {
background-color: #e74c3c;
}
.container {
margin: 40px auto 20px;
width: 250px;
}
.clock {
border: 5px solid #FFF;
border-radius: 100%;
display: block;
height: 250px;
width: 250px;
position: relative;
}
.clock .start {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
.clock .end {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
答案 0 :(得分:0)
g = sns.jointplot("petal_length", "sepal_length", data=iris,
marginal_kws=dict(bins=15, rug=True),
annot_kws=dict(stat="r"),
s=40, edgecolor="w", linewidth=1)
&#13;
.pieContainer {
height: 100px;
}
.pieBackground {
background-color: grey;
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: -1px 1px 3px #000;
-webkit-box-shadow: -1px 1px 3px #000;
-o-box-shadow: -1px 1px 3px #000;
box-shadow: -1px 1px 3px #000;
}
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
background-color: #1b458b;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
}
&#13;
答案 1 :(得分:0)
我认为你想要的是改变剧本的这一部分
var start = hoursStart + 90;
var end = hoursEnd - 90;
$(".clock")
.css("background-color", "blue")
.css("background-image",
"linear-gradient(" + end +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start +"deg, #e74c3c 50%, transparent 50%)");
// These fields come from server
var start_hour = 7;
var end_hour = 10;
var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");
var start = hoursStart + 90;
var end = hoursEnd - 90;
$(".clock")
.css("background-color", "blue")
.css("background-image",
"linear-gradient(" + end + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start + "deg, #e74c3c 50%, transparent 50%)");
&#13;
body {
background-color: #e74c3c;
}
.container {
margin: 40px auto 20px;
width: 250px;
}
.clock {
border: 5px solid #FFF;
border-radius: 100%;
display: block;
height: 250px;
width: 250px;
position: relative;
}
.clock .start {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
.clock .end {
background: #fff;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -105px -2px 0;
padding: 105px 2px 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="clock">
<div class="start"></div>
<div class="end"></div>
</div>
</div>
&#13;