js+css实现雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --bright-green: 144, 255, 64; --dark-green: #192914; --green: #2e4f27; } body { background-color: black; display: flex; height: 100vh; margin: 0; align-items: center; justify-content: center; } #radar { width: 501px; aspect-ratio: 1; background-color: var(--dark-green); padding: 25px; box-sizing: border-box; position: relative; } #radar:after { pointer-events: none; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 50px 50px; background-image: linear-gradient(to right, rgb(var(--bright-green)) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--bright-green)) 1px, transparent 1px); opacity: 0.5; } #circle { pointer-events: none; height: 100%; width: 100%; border-radius: 100%; overflow: hidden; position: relative; } #rings { pointer-events: none; height: 100%; width: 100%; background-color: var(--green); position: absolute; } #rings > * { border-radius: 100%; border: 2px solid rgb(var(--bright-green)); box-sizing: border-box; position: absolute; left: 50%; top: 50%; translate: -50% -50%; aspect-ratio: 1; } #ring-0 { width: 100%; } #ring-1 { width: 80%; } #ring-2 { width: 60%; } #ring-3 { width: 40%; } #ring-4 { width: 20%; } #rotator { pointer-ev.........完整代码请登录后点击上方下载按钮下载查看
网友评论0