其他网站看到的,觉得还不错,挺有意思的,就分享给大家吧
先看效果吧:
代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>写轮眼</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; } .zuo, .you { width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; } .zuo { transform: translateX(-135px); border-radius: 0 120px 0 120px; box-shadow: inset 3px 2px 3px rgba(17, 17, 17, 0.8); } .zuo::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; border-radius: 50%; border: 2px solid #000; animation: colour 2s linear forwards; } @keyframes colour { 0%, 30% { background-color: rgb(0, 0, 0); } 100% { background-color: rgb(255, 4, 4); } } .zuoZong { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; border-radius: 50%; background-color: rgb(0, 0, 0); z-index: 1; animation: da 3s linear forwards; } @keyframes da { 100% { width: 15px; height: 15px; } } .zuoYu { position: absolute; top: -25px; left: -25px; bottom: -25px; right: -25px; border-radius: 50%; border: 2px solid rgb(0, 0, 0); animation: zhuan 2s linear 2s forwards; opacity: 0; } @keyframes zhuan { 100% { opacity: 1; transform: rotate(720deg); } } .zuoYu .yu { position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(0, 0, 0); } .zuoYu .yu::after { content: ''; position: absolute; top: -6px; left: -1px; width: 6px; height: 20px; border-radius: 50%; border-left: 6px solid rgb(0, 0, 0); } .zuoYu .yu:nth-child(1) { animation: yu1 2s ease-in 2s forwards; } @keyframes yu1 { 0% { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); } 100% { left: 50%; top: -9%; transform: scale(1) rotate(80deg); } } .zuoYu .yu:nth-child(2) { animation: yu2 2s ease-in 2s forwards; } @keyframes yu2 { 0% { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); } 100% { top: 60%; left: -9%; transform: scale(1) rotate(-60deg); } } .zuoYu .yu:nth-child(3) { animation: yu3 2s ease-in 2s forwards; } @keyframes yu3 { 0% { opacity: 0; right: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.1); } 100% { top: 60%; right: -9%; transform: scale(1) rotate(180deg); } } .zuo::before, .you::before { content: ''; position: absolute; left: 38%; top: 30%; width: 12px; height: 12px; border-radius: 50%; background-color: rgb(255, 255, 255); z-index: 10; } .you { transform: translateX(135px); border-radius: 120px 0 120px 0; box-shadow: inset -3px 2px 3px rgba(17, 17, 17, 0.8); /* filter: drop-shadow( 8px -5px 3px rgb(216, 59, 59)); */ } .you::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; border-radius: 50%; border: 2px solid #000; animation: youcolor 2s linear forwards; } @keyframes youcolor { 0%, 30% { background-color: rgb(0, 0, 0); } 100% { background-color: rgb(144, 130, 183); } } .dian { position: absolute; top: 50%; left: 50%; background-color: #000; transform: translate(-50%, -50%); border-radius: 50%; z-index: 10; animation: youda 3s linear forwards; } @keyframes youda { 0% { height: 0px; width: 0px; } 100% { height: 15px; width: 15px; } } .youYu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .quan { position: absolute; border-radius: 50%; border: 2px solid #000; z-index: calc(1 - var(--r)); animation: zhi 2s ease-out 2s forwards; } @keyframes zhi { 0% { top: calc(var(--r) * 1px); left: calc(var(--r) * 1px); right: calc(var(--r) * 1px); bottom: calc(var(--r) * 1px); } 100% { top: calc(var(--r) * -35px); left: calc(var(--r) * -35px); right: calc(var(--r) * -35px); bottom: calc(var(--r) * -35px); background-color: rgb(187, 177, 214); } } </style> </head> <body> <!-- 血轮眼 --> <div class="zuo"> <!-- 眼睛最中间那个黑点 --> <div class="zuoZong"> <!-- 三勾玉所在的圈 --> <div class="zuoYu"> <!-- 三个勾玉 --> <span class="yu"></span> <span class="yu"></span> <span class="yu"></span> </div> </div> </div> <!-- 轮回眼 --> <div class="you"> <!-- 眼睛最中间那个黑点 --> <div class="dian"></div> <!-- 3个轮回圈 --> <div class="youYu"> <span class="quan" style="--r:2;"></span> <span class="quan" style="--r:3;"></span> <span class="quan" style="--r:4;"></span> </div> </div> </body> </html>