<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css实现转圈</title>
</head>
<body>
<div class="circle">
<div class="circle-left"></div>
<div class="circle-right"></div>
<div class="circle-bottom-left"></div>
<div class="circle-bottom-right"></div>
</div>
</body>
</html>
<style>
.circle {
-webkit-mask: radial-gradient(transparent 56px, #000 58px);
/* 蒙版,貌似只兼容谷歌 */
116px;
/* 圈的大小 */
height: 116px;
overflow: hidden;
border-radius: 50%;
position: relative;
animation: rotate .8s linear 0s infinite normal;
/* 自动播放 */
}
@keyframes rotate {
/* 自动播放参数 */
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* IE 9 */
-moz-transform: rotate(0deg);
/* Firefox */
-webkit-transform: rotate(0deg);
/* Safari 和 Chrome */
-o-transform: rotate(0deg);
/* Opera */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* IE 9 */
-moz-transform: rotate(360deg);
/* Firefox */
-webkit-transform: rotate(360deg);
/* Safari 和 Chrome */
-o-transform: rotate(360deg);
/* Opera */
}
}
.circle-left {
50%;
height: 100%;
background: #cccccc;
transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
position: absolute;
left: 0;
z-index: 0;
}
.circle-right {
50%;
height: 100%;
background: #cccccc;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-moz-transform: rotate(30deg);
/* Firefox */
-webkit-transform: rotate(30deg);
/* Safari 和 Chrome */
-o-transform: rotate(30deg);
/* Opera */
/* 控制蓝色区域长短占比 */
transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
position: absolute;
right: 0;
z-index: 2;
}
.circle-bottom-left {
50%;
height: 100%;
background: #31A4FF;
position: absolute;
left: 0;
z-index: -1;
}
.circle-bottom-right {
50%;
height: 100%;
background: #31A4FF;
position: absolute;
right: 0;
z-index: 1;
}
</style>
效果图：
