我用 CSS3
创建了一个半圆,我将像图表一样使用它。
我的问题是我想要为background-color
设置动画并旋转
它。
最后,我希望看到这样的事情...... 这是jsfiddle https://jsfiddle.net/wu1tbsne/28/
//FIRST BAR
$('#half-donut').addClass('first-start');
setTimeout(function() {
$('#half-donut').addClass('first-pause');
}, 1700);
body {
background-color: #000;
}
#half-donut {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0% 0%;
margin-right: 3px;
display: flex;
justify-content: center;
align-items: flex-end;
}
#figlio {
width: 140px;
height: 75px;
background: #000;
border-radius: 140px 140px 0% 0%;
}
@keyframes first {
0% {
background-color: green;
}
33% {
background-color: yellow;
}
66% {
background-color: orange;
}
100% {
background-color: red;
}
}
.first-start {
animation: first 2s linear;
}
.first-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="half-donut">
<div id="figlio"></div>
</div>
最后我想看到这样的东西:
最佳答案
我解决这个问题现在效果很好:
这是代码:
$('#first').addClass('first-start');
setTimeout(function() {
$('#first').addClass('first-pause');
}, 1700);
//SECOND BAR
$('#second').addClass('second-start');
setTimeout(function() {
$('#second').addClass('second-pause');
}, 400);
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first,
#box-second {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first,
#second {
border-radius: 200px 200px 0 0;
margin: 0;
background: red;
width: 200px;
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#n1,
#n2 {
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
@keyframes first {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
@keyframes second {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
.first-start,
.second-start {
animation: first 2s linear;
}
.first-pause,
.second-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first">
</div>
<div id="n1">
1500
</div>
</div>
<div id="box-second">
<div id="second">
</div>
<div id="n2">
270
</div>
</div>
</div>
这是 jsfiddle: 这是 jsfiddle: https://jsfiddle.net/k85t9zgq/22/
关于jquery - 如何像车速表一样将背景颜色旋转半圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52016358/