我用CSS3
创建了一个半圆,将其像图表一样使用。
我的问题是我想为其制作动画background-color
和rotate
。
最后,我想看看这样的事情... 这是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>
最后,我想看看这样的事情:
答案 0 :(得分:2)
我解决,此问题现在非常有效:
这是代码:
$('#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/
答案 1 :(得分:0)
这是一种实现方法。您可以尝试使用可对其进行动画处理的元素来隐藏原始div。
在下面的示例中,我仅将psuedo ::before
应用于#half-donut
元素,并从左向右移动。希望这能给您一个解决方法。
$(document).ready(function(){
$('#half-donut').addClass('first-start');
$('#half-donut::before').addClass('start-anim');
setTimeout(function() {
$('#half-donut').addClass('first-pause');
}, 1700);
});
body {
background-color: #000;
}
#half-donut {
z-index: 0;
position:relative;
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;
}
#half-donut::before {
position: absolute;
z-index: 1;
top: 0;
right: -20%;
overflow: hidden;
content: "";
background-color: black;
width: 100%;
height: 100%;
margin-right: 3px;
display: flex;
justify-content: center;
align-items: flex-end;
animation: start 2s linear;
}
#figlio {
z-index: 2;
width: 140px;
height: 75px;
background: #000;
border-radius: 140px 140px 0% 0%;
}
@keyframes start {
0% {
right: -20%;
}
33% {
right: -33%;
}
66% {
right: -66%;
}
100% {
right: -100%;
}
}
@keyframes first {
0% {
background-color: green;
}
33% {
background-color: yellow;
}
66% {
background-color: orange;
}
100% {
background-color: red;
}
}
.first-start {
animation: first 2s linear;
}
.start-anim {
animation: start 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>
答案 2 :(得分:0)
我的解决方法如下:
https://codebrace.com/editor/b01ecd3e6
body {
background-color: #000;
}
#half-donut {
width: 200px;
height: 100px;
background-color: #0f0;
border-radius: 200px 200px 0% 0%;
margin-right: 3px;
display: flex;
justify-content: center;
align-items: flex-end;
position:relative;
overflow: hidden;
}
#meterptr{
width:200px;
height:200px;
position: absolute;
background-color:red;
top:0;
left:-50%;
transform-origin: center right;
transform: rotate(-90deg);
}
#figlio {
width: 140px;
height: 75px;
background: #000;
border-radius: 140px 140px 0% 0%;
position:absolute;
}