html,body { width:100%; height:100%; display:flex; background:#000; overflow:hidden; } .g-number { position:absolute; width:300px; top:27%; text-align:center; font-size:32px; z-index:10; color:#fff; } .g-container { position:relative; width:300px; height:400px; margin:auto; } .g-contrast { filter:contrast(15) hue-rotate(0); width:300px; height:400px; background-color:#000; overflow:hidden; animation:hueRotate 10s infinite linear; } .g-circle { position:relative; width:300px; height:300px; box-sizing:border-box; filter:blur(8px); } .g-circle::after { content:""; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) rotate(0); width:200px; height:200px; background-color:#00ff6f; border-radius:42% 38% 62% 49% / 45%; animation:rotate 10s infinite linear; } .g-circle::before { content:""; position:absolute; width:176px; height:176px; top:40%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background-color:#000; z-index:10; } .g-bubbles { position:absolute; left:50%; bottom:0; width:100px; height:40px; transform:translate(-50%,0); border-radius:100px 100px 0 0; background-color:#00ff6f; filter:blur(5px); } li { position:absolute; border-radius:50%; background:#00ff6f; } @keyframes rotate { 50% { border-radius:45% / 42% 38% 58% 49%; } 100% { transform:translate(-50%,-50%) rotate(720deg); } }@keyframes moveToTop { 90% { opacity:1; } 100% { opacity:.1; transform:translate(-50%,-180px); } }@keyframes hueRotate { 100% { filter:contrast(15) hue-rotate(360deg); } }
更新时间:2020-07-09 15:26:10