<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
div{
margin: 5px;
}
.box{
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box2{
width: 100px;
height: 100px;
background-color: lightskyblue;
border-radius:0 50% 50% 0/50%;
}
.box3{
width: 50px;
height: 100px;
background-color: lightskyblue;
border-radius:0 100% 100% 0/50%;
}

<body>
<div class="box"></div>
</body>
.box{
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
background-color: inherit;
border-radius: 0 100% 100% 0/50%;
transform-origin: left;
transform: rotate(.1turn);
}

<body>
<div class="box"></div>
<div class="box0"></div>
<div class="box2">O</div>
<div class="box3">O</div>
<div class="box4">O</div>
</body>
body{
margin-left: 100px;
}
.box,.box0{
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50% ,lightskyblue 0);
}
.box:before,.box0:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
background-color: inherit;
border-radius:0 100% 100% 0/50%;
transform-origin: left;
animation: spin 16s linear infinite;
}
.box0:before{
background-color: lightseagreen;
}
.box2,.box3,.box4{
outline: 1px solid lightseagreen;
margin-top: 25px;
}
.box2{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background-color: lightgoldenrodyellow;
animation: spin 16s linear infinite;
}
.box3,.box4{
width: 50px;
margin-left: 50px;
height: 100px;
line-height: 100px;
text-align:center;
border-radius: 0 100% 100% 0/50%;
background-color: lightgoldenrodyellow;
animation: spin 16s linear infinite;
}
.box3{
text-align: left;
transform-origin: left;
}
@keyframes spin{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
注意,transfom-origin:left。

<body>
<div class="box"></div>
<div class="box2"></div>
</body>
.box,.box2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightgoldenrodyellow;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before,.box2:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
}
.box:before{
animation: spin 8s linear infinite;
}
.box2:before{
animation: spin2 8s linear infinite;
}
@keyframes spin{
100%{
transform: rotate(180deg);
}
}
@keyframes spin2{
50%{
transform: rotate(180deg);
}
}
@keyframes的帧定义,注意50%和100%的区别。

<body>
<div class="box"></div>
</body>
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightgoldenrodyellow;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite paused,
bg 100s step-end infinite paused;
}
@keyframes spin{
100%{
transform: rotate(180deg);
}
}
@keyframes bg{
50%{
background-color:lightskyblue;
}
}
注意,动画spin和动画bg的animation-duration。

<body>
<div class="box"></div>
</body>
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightgoldenrodyellow;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite paused,
bg 100s step-end infinite paused;
}
@keyframes spin{
100%{
transform: rotate(180deg);
}
}
@keyframes bg{
50%{
background-color:lightskyblue;
}
}
animation-delay为-4s,即动画从4s时的状态开始动画。

而将动画animation-play-state置为paused,就可以得到静态饼图了。
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightgoldenrodyellow;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
}
.box:before{
animation: spin 8s -4s linear infinite paused,
bg 16s -4s step-end infinite paused;
}
@keyframes spin{
100%{
transform: rotate(180deg);
}
}
@keyframes bg{
50%{
background-color:lightskyblue;
}
}

<body>
<div class="box smaller"></div>
<div class="box larger"></div>
</body>
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightgoldenrodyellow;
background-image: linear-gradient(to right,transparent 50%,lightskyblue 0);
}
.box:before{
display: block;
content: "";
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite paused,
bg 100s step-end infinite paused;
}
@keyframes spin{
100%{
transform: rotate(180deg);
}
}
@keyframes bg{
50%{
background-color:lightskyblue;
}
}
.smaller:before{
animation-delay: -20s;
}
.larger:before{
animation-delay: -60s;
}

438

被折叠的 条评论
为什么被折叠?



