雷达扫描动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Radar MapBox map</title> <style> html, body { background: black; font-family: 'Inconsolata', monospace; font-family: 'Open Sans', sans-serif; height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } img#radar { left: 0px; top: 0px; position: absolute; pointer-events: none; user-select: none; animation: rotate 5s infinite; transform-origin: 300px 300px; animation-timing-function: linear; opacity: 1; z-index: 10; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } svg { position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; z-index: 11; } #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #grid { z-index: 42; } #grid { stroke: rgba(230,255,0,.24); stroke-width: .5px; fill: none; } a { color: white; pointer-events: all; } not-anymore { text-decoration: line-through; text-decoration-color: black; } </style> </head> <body translate="no"> <svg width="1600" height="1600" viewbox="0 0 600 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0