div+css实现锥形梯度雷达扫描动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现锥形梯度雷达扫描动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; width: 100vw; margin: 0; display: flex; align-items: center; justify-content: center; background-color: black; overflow: auto; } .radar { height: 500px; width: 500px; flex-shrink: 0; overflow: hidden; position: absolute; border-radius: 100%; border: 1px solid lime; box-shadow: 0 0 0px 10px rgba(0, 255, 0, 0.25); background-image: linear-gradient(90deg, rgba(0, 255, 0, 0.25) 1px, transparent 1px), linear-gradient(rgba(0, 255, 0, 0.25) 1px, transparent 1px), repeating-conic-gradient(rgba(0, 255, 0, 0.25) 0 1deg, rgba(0, 255, 0, 0) 0 45deg), repeating-radial-gradient(rgba(0, 255, 0, 0.25), rgba(0, 255, 0, 0.25) 1px, black 1px, black 50px); background-size: 50px 50px, 50px 50px, cover, cover; cursor: crosshair; } .radar::before { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 100%; z-index: 0; animation: spin 5000ms linear infinite; background: conic-gradient(lime, transparent, transparent); } .radar__trail { display: grid; grid-template-columns: repeat(25, 20px); grid-template-rows: repeat(25, 20px); overflow: hidden; border-radius: 100%; } .radar__trail::before { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 100%; z-index: 2; animation: spin 5000ms linear infinite; clip-path: polygon(50% -50%, -100% 100%, 50% 100%); } .trail__item { background: lime; filter: blur(10px); z-index: 1; border-radius: 100%; opacity: 0; transition: opacity 5000ms ease 200ms, transform 800ms ease; mix-blend-mode: plus-lighter; } .trail__item:hover { opacity: 1; transition: opacity 0.2s ease; transform: scale(1.5); } @keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } </style> </head> <body > <div class="radar"> <div class="radar__trail"> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item"></div> <div class="trail__item&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0