微信雷達(dá)掃描是一種常見的動(dòng)畫效果,可以通過CSS來實(shí)現(xiàn)。以下是一段實(shí)現(xiàn)微信雷達(dá)掃描的CSS代碼:
.radar { position: relative; width: 200px; height: 200px; } .radar:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 0 6px rgba(0, 0, 0, 0.4); animation: pulse 2s infinite cubic-bezier(0.9, 0, 0.15, 1); } .radar:after { content: ""; position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 4px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.05); animation: blink 2s infinite cubic-bezier(0.9, 0, 0.15, 1); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4) inset, 0 0 0 rgba(0, 0, 0, 0.4); opacity: 1; } 100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.4) inset, 0 0 40px rgba(0, 0, 0, 0.4); opacity: 0; } } @keyframes blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
這段代碼使用偽元素:before和:after作為雷達(dá)掃描的主體和中心點(diǎn),通過animation屬性來實(shí)現(xiàn)動(dòng)畫效果。其中pulse和blink都是自定義的關(guān)鍵幀,用于控制雷達(dá)掃描和中心點(diǎn)的閃爍效果。