* { margin:0; padding:0; } body { display:flex; justify-content:center; align-items:center; min-height:100vh; background:#000; } .circle { position:relative; width:600px; height:600px; filter:url(#wavy) blur(1px); } .circle::before { content:""; position:absolute; top:100px; left:100px; right:100px; bottom:100px; border:20px solid #fff; box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0; border-radius:50%; -webkit-box-reflect:below 10px linear-gradient(transparent,transparent,#0002); animation:animate 5s linear infinite; } .circle::after { content:""; position:absolute; top:100px; left:100px; right:100px; bottom:100px; border:20px solid #fff; box-shadow:0 0 10px #fff,inset 0 0 10px #fff; border-radius:50%; } .circle:nth-child(2):before { animation-delay:-2.5s; } @keyframes animate { 0% { box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0; filter:hue-rotate(0deg); } 20% { box-shadow:0 0 60px #0f0,inset 0 0 60px #0f0; } 40% { box-shadow:0 0 40px #0f0,inset 0 0 40px #0f0; } 60% { box-shadow:0 0 80px #0f0,inset 0 0 80px #0f0; } 80% { box-shadow:0 0 100px #0f0,inset 0 0 100px #0f0; } 100% { box-shadow:0 0 50px #0f0,inset 0 0 50px #0f0; filter:hue-rotate(360deg); } }svg { width:0; height:0; }
更新时间:2022-05-19 13:57:37