js实现带音效开关的雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现带音效开关的雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100vh; } body { background: #001413; overflow: hidden; display: grid; place-items: center; } .radar { --size: 450px; --color: #15fcd8; width: var(--size); height: var(--size); margin: auto; border: 3px solid var(--color); border-radius: 50%; background: /* 4) guides */ linear-gradient(transparent 0 49.75%, var(--color) 49.75% 50%, transparent 50% 100%), linear-gradient(to right, transparent 0 49.75%, var(--color) 49.75% 50%, transparent 50% 100%), /* 3) radar */ radial-gradient( transparent 0% 25%, var(--color) 25.5% 25.75%, transparent 26% 50%, var(--color) 50.5% 50.75%, transparent 51% 75%, var(--color) 75.5% 75.75%, transparent 76% 100%), /* 2.5) fondo tapar grid */ radial-gradient(#00767211, #002421 65%), /* 2) grid */ repeating-linear-gradient(to right, #0e817a77 0 1px, transparent 1.5px 25px), repeating-linear-gradient(#0e817a77 0 1px, transparent 1.5px 25px), /* 1) background */ radial-gradient(#007672 0, #002421 65%); position: relative; mix-blend-mode: difference; /* color-dodge; */ } .dot { width: var(--size); height: var(--size); background: var(--color); border-radius: 50%; position: absolute; filter: blur(1px); opacity: 0.5; left: var(--x); top: var(--y); -webkit-animation: disappear 1s ease-in-out forwards; animation: disappear 1s ease-in-out forwards; } .radar::before { --dark-color: color-mix(in srgb, var(--color), transparent 85%); content: ""; display: block; background: var(--dark-color); width: 100%; height: 100%; border-radius: 50%; position: absolute; filter: blur(1px); -webkit-animation: pulse 1.25s infinite 0.25s; animation: pulse 1.25s infinite 0.25s; } .radar::after { --radar-color: color-mix(in srgb, var(--color), transparent 50%); content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(transparent 0, var(--radar-color) 0.1turn 0.15turn, transparent 0.25turn); mix-blend-mode: plus-lighter; -webkit-animation.........完整代码请登录后点击上方下载按钮下载查看
网友评论0