svg+css实现雷达扫描动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现雷达扫描动画效果代码

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

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

<head>
    <meta charset="UTF-8">

<style>
    html,
body {
  height: 100%;
}

body {
  background-image: linear-gradient(to bottom, #2c3651, #352449);
}

@-webkit-keyframes rotator {
  from {
    -webkit-transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
  }
}
@keyframes rotator {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
p {
  color: white;
}

@-webkit-keyframes flash-icon {
  0%, 75%, 100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@keyframes flash-icon {
  0%, 45%, 100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
.flash-icon {
  -webkit-animation-name: flash-icon;
  animation-name: flash-icon;
}

@-webkit-keyframes flash-icon-container {
  0%, 75%, 100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
@keyframes flash-icon-container {
  0%, 18%, 100% {
    opacity: 0;
  }
  7% {
    opacity: 0.5;
  }
}
.flash-icon-container {
  -webkit-animation-name: flash-icon-container;
  animation-name: flash-icon-container;
}

.lighthouse-scanner-container {
  position: relative;
}

#lighthouse-radar-bg {
  position: absolute;
  top: 0;
  left: 0;
}

.lighthouse-scanner-container {
  width: 351px;
  height: 351px;
}

.lighthouse-rays {
  width: 351px;
  height: 351px;
  position: relative;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-animation-name: rotator;
  animation-name: rotator;
  -webkit-animation-duration: 1800ms;
          animation-duration: 1800ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  /* Chrome, Safari, Opera */
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.radar-circles {
  position: absolute;
  top: 0;
  left: 0;
}

#icon-pack {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.icon-found,
.icon-found-container {
  opacity: 0;
}

.icon-found {
  opacity: 0;
  will-change: opacity;
  -webkit-animation-name: flash-icon;
  animation-name: flash-icon;
  -webkit-animation-duration: 1800ms;
          animation-duration: 1800ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  /* Chrome, Safari, Opera */
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.icon-found-container {
  opacity: 0;
  will-change: opacity;
  -webkit-animation-name: flash-icon-container;
  animation-name: flash-icon-container;
  -webkit-animation-duration: 1800ms;
          animation-duration: 1800ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  /* Chrome, Safari, Opera */
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

#scan__found__ship .icon-found {
  -webkit-animation-delay: 1650ms;
          animation-delay: 1650ms;
}
#scan__found__ship .icon-found-container {
  -webkit-animation-delay: 1650ms;
          animation-delay: 1650ms;
}

#scan__found__treasure .icon-found,
#scan__found__treasure .icon-found-container {
  -webkit-animation-delay: 1950ms;
          animation-delay: 1950ms;
}

#scan__found__wave .icon-found,
#scan__found__wave .icon-found-container {
  -webkit-animation-delay: 2250ms;
          animation-delay: 2250ms;
}

#scan__found__bird .icon-found,
#scan__found__bird .icon-found-container {
  -webkit-animation-delay: 2550ms;
          animation-delay: 2550ms;
}

#scan__found__bottle .icon-found,
#scan__found__bottle .icon-found-container {
  -webkit-animation-delay: 2850ms;
          animation-delay: 2850ms;
}

#scan__found__whale .icon-found,
#scan__found__whale .icon-found-container {
  -webkit-animation-delay: 3150ms;
          animation-delay: 3150ms;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="lighthouse-scanner-container">
        <svg id="icon-pack" width="351px" height="351px" viewBox="0 0 351 351" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>-lighthouse__smart-scan__animation--icons</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <ellipse id="path-1" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <ellipse id="path-3" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill=".........完整代码请登录后点击上方下载按钮下载查看