<span class="pie-wrap">
<span class="pie-r"></span>
<span class="pie-l"></span>
</span>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
body, html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.pie-wrap {
position: relative;
width: 200px;
height: 200px;
}
.pie-r,
.pie-l {
position: absolute;
display: block;
width: 50%;
height: 100%;
top: 0;
overflow: hidden;
}
.pie-r {
right: 0;
}
.pie-l {
left: 0;
}
.pie-r:before,
.pie-l:before {
content: "";
position: absolute;
display: block;
border-width: 100px 50px;
border-style: solid;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.pie-r:before {
right: 0;
border-radius: 0 100px 100px 0;
border-color: #000;
transform-origin: left;
animation-name: rotateR;
}
.pie-l:before {
left: 0;
border-radius: 100px 0 0 100px;
border-color: #000;
transform-origin: right;
animation-name: rotateL;
}
@keyframes rotateR {
0% {
transform: rotateZ(-180deg);
}
50% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(0deg);
}
}
@keyframes rotateL {
0% {
transform: rotateZ(180deg);
}
50% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.