css实现一个雷达动画效果代码-html代码-BFW代码库

css实现一个雷达动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个雷达动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background-color: #000;
      margin: 0;
    }
    
    .radar {
      background: url(https://gtms03.alicdn.com/tps/i3/TB1Vet9IVXXXXbuapXXb2YSIVXX-567-567.png) no-repeat 50% 50%;
      width: 284px;
      height: 284px;
      position: relative;
      background-size: 284px 284px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -142px;
      margin-top: -142px;
    }
    
    .radar:hover {
      background: none;
    }
    
    .radar .pointer {
      position: absolute;
      z-index: 1024;
      left: 10.5820106%;
      right: 10.5820106%;
      top: 10.5820106%;
      bottom: 50%;
      will-change: transform;
      transform-origin: 50% 100%;
      border-radius: 50% 50% 0 0/100% 100% 0 0;
      background-image: linear-gradient(135deg, rgba(5, 162, 185, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, rgba(0, 0, 0, 0) 100%);
      -webkit-clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
              clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
      -webkit-animation: rotate360 3s infinite linear;
              animation: rotate360 3s infinite linear;
    }
    
    .radar .pointer:after {
      content: "";
      position: absol.........完整代码请登录后点击上方下载按钮下载查看