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="white">
            <use xlink:href="#path-3"></use>
        </mask>
        <ellipse id="path-5" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill="white">
            <use xlink:href="#path-5"></use>
        </mask>
        <ellipse id="path-7" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-8" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill="white">
            <use xlink:href="#path-7"></use>
        </mask>
        <ellipse id="path-9" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill="white">
            <use xlink:href="#path-9"></use>
        </mask>
        <ellipse id="path-11" cx="37.3546064" cy="37.5687494" rx="36.9543135" ry="36.9543135"></ellipse>
        <mask id="mask-12" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="73.908627" height="73.908627" fill="white">
            <use xlink:href="#path-11"></use>
        </mask>
    </defs>
    <g id="📊-Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="-lighthouse__smart-scan__animation--icons">
            <g id="lighthouse-scanner" transform="translate(41.000000, 29.000000)">
                <g id="scan__found__ship" transform="translate(192.000000, 56.000000)">
                    <use id="scan__icon-container" class="icon-found-container" stroke="#F1E754" mask="url(#mask-2)" stroke-width="4" fill="#2E3350" opacity="0.5" xlink:href="#path-1"></use>
                    <g id="icon-ship" class="icon-found" transform="translate(13.706284, 13.396311)" fill="#F1E754">
                        <path d="M23.6483219,3.36862943 L28.3442224,3.36862943 L28.0492733,2.65143736 C27.9910596,2.50978416 27.9910596,2.35066687 28.0492733,2.20862558 L28.3438343,1.49259779 L23.6483219,1.49259779 L23.6483219,3.36862943 L23.6483219,3.36862943 Z M29.2123818,4.53290227 L23.0661855,4.53290227 C22.7448462,4.53290227 22.4840491,4.27210515 22.4840491,3.95076585 L22.4840491,0.910461364 C22.4840491,0.589122059 22.7448462,0.328324942 23.0661855,0.328324942 L29.2123818,0.328324942 C29.4064273,0.328324942 29.5880539,0.424959588 29.6959431,0.586405422 C29.8038324,0.747463166 29.8244013,0.951987095 29.7510521,1.1316732 L29.217427,2.43022552 L29.7510521,3.72916592 C29.8244013,3.90885203 29.8038324,4.11376405 29.6959431,4.27482179 C29.........完整代码请登录后点击上方下载按钮下载查看