body,html { width:100%; height:100%; display:flex; background:#333; } .g-container { position:relative; width:200px; height:200px; margin:auto; border-radius:50%; box-sizing:border-box; border:6px solid #444; } .g-circle { position:absolute; top:-6px; left:-6px; bottom:-6px; right:-6px; border-radius:50%; background:conic-gradient(#fc0 0%,transparent 40%,transparent); animation:rotate 3s ease-in-out infinite; transition-origin:50% 50%; } .g-circle::before { content:""; position:absolute; top:6px; left:6px; bottom:6px; right:6px; background:#333; border-radius:50%; // z-index:1; } .g-circle::after { content:""; position:absolute; width:12px; height:12px; top:0; left:50%; transform:translate(-50%,-3px); border-radius:50%; background:#fc0; box-shadow:0 0 4px 2px #fc0; } @keyframes rotate { 100% { transform:rotate(-360deg); } }
更新时间:2022-09-23 09:52:32