https://juejin.cn/post/6940899696038641700 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>两个DIV实现雷达扫描效果</title> <style> .radar { overflow: hidden; position: relative; margin: 200px; width: 200px; height: 200px; border-radius: 50%; background: #fff; border: 1px solid #5ef2ff; box-sizing: border-box; } .radar::before { width: 100px; height: 200px; content: ''; display: block; position: absolute; right: 0; top: 0; box-sizing: border-box; border-left: 1px solid #5ef2ff; } .radar::after { width: 200px; height: 100px; content: ''; display: block; box-sizing: border-box; border-bottom: 1px solid #5ef2ff; } .fan { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; border: 1px solid #5ef2ff; width: 100px; height: 100px; } .fan::after { content: ""; width: 100px; height: 100px; display: block; box-sizing: border-box; position: relative; top: -50%; right: -50%; transform-origin: 0% 100%; border-bottom: 3px solid transparent; border-image: linear-gradient(to right, transparent, #5ef2ff); border-image-slice: 3; background: transparent; background-image: linear-gradient(to right, transparent, #9bfdfd); animation: rotateAnimate 2s linear infinite; } @keyframes rotateAnimate { from { transform: rotate(0deg) skew(-10deg) } to { transform: rotate(360deg) skew(-10deg) } } </style> </head> <body> <div class="radar"> <div class="fan"></div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 两个DIV实现雷达扫描效果 喜欢 (0)or分享 (0)
