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.5880539,4.43626762 29.4064273,4.53290227 29.2123818,4.53290227 L29.2123818,4.53290227 Z" id="Fill-110"></path>
                        <path d="M28.120682,25.6423332 L34.0227691,25.6423332 C33.3024723,24.5777997 32.8526749,22.867871 32.8526749,20.8668741 C32.8526749,18.8658772 33.3024723,17.1555603 34.0227691,16.091415 L12.1092138,16.091415 C12.8298986,17.1555603 13.2796961,18.8658772 13.2796961,20.8668741 C13.2796961,22.867871 12.8298986,24.5777997 12.1092138,25.6423332 L18.0124652,25.6423332 C19.5124367,24.7586501 21.0981763,23.7228354 22.7285464,22.5628315 C22.9307417,22.4188498 23.2020173,22.4192379 23.4034365,22.5624434 C25.0376875,23.7247758 26.6238152,24.7605906 28.120682,25.6423332 L28.120682,25.6423332 Z M35.8495132,26.806606 L27.9623409,26.806606 C27.8591087,26.806606 27.757817,26.7790516 27.6681679,26.7270474 C26.2054532,25.8709188 24.6589107,24.8704203 23.0661855,23.7500017 C21.4769531,24.8684798 19.9307987,25.8689783 18.4649792,26.7270474 C18.3753302,26.7790516 18.2740385,26.806606 18.1708063,26.806606 L10.2824697,26.806606 C9.96113036,26.806606 9.70033324,26.5458089 9.70033324,26.2244696 C9.70033324,25.9031303 9.96113036,25.6423332 10.2824697,25.6423332 C11.047785,25.6423332 12.1154232,23.8256795 12.1154232,20.8668741 C12.1154232,17.9076806 11.047785,16.091415 10.2824697,16.091415 C9.96113036,16.091415 9.70033324,15.8306179 9.70033324,15.5092785 C9.70033324,15.1879392 9.96113036,14.9271421 10.2824697,14.9271421 L35.8495132,14.9271421 C36.1708525,14.9271421 36.4316496,15.1879392 36.4316496,15.5092785 C36.4316496,15.8306179 36.1708525,16.091415 35.8495132,16.091415 C35.0841979,16.091415 34.0169478,17.9076806 34.0169478,20.8668741 C34.0169478,23.8256795 35.0841979,25.6423332 35.8495132,25.6423332 C36.1708525,25.6423332 36.4316496,25.9031303 36.4316496,26.2244696 C36.4316496,26.5458089 36.1708525,26.806606 35.8495132,26.806606 L35.8495132,26.806606 Z" id="Fill-111"></path>
                        <path d="M29.4595958,40.7107404 C27.3755474,40.7107404 25.679978,38.9973189 25.679978,36.8911493 L26.8442509,36.8911493 C26.8442509,38.3554165 28.0174498,39.5464676 29.4595958,39.5464676 C30.9009655,39.5464676 32.0733883,38.3554165 32.0733883,36.8911493 C32.0733883,36.766184 32.1137498,36.6447116 32.1878751,36.5445841 C34.5276754,33.3847476 35.6116135,31.2514117 36.0559776,30.2419871 C34.3930079,29.9676068 30.2214183,28.786258 23.0661855,23.7500017 C15.912117,28.786258 11.7416916,29.9676068 10.0794981,30.2419871 C10.5230861,31.2502474 11.6062479,33.3839714 13.9460482,36.5445841 C14.0201736,36.6447116 14.060535,36.766184 14.060535,36.8911493 C14.060535,38.3554165 15.2325697,39.5464676 16.6735514,39.5464676 C18.1153093,39.5464676 19.2881201,38.3554165 19.2881201,36.8911493 L20.452393,36.8911493 C20.452393,38.9973189 18.7572117,40.7107404 16.6735514,40.7107404 C14.6566427,40.7107404 13.0037634,39.1036558 12.9013074,37.0890757 C9.49774977,32.4630316 8.73088205,30.0141777 8.69944669,29.9113336 C8.64511395,29.7320356 8.68004214,29.537602 8.79375279,29.3885751 C8.90707534,29.2403244 9.06813309,29.1452421 9.27265702,29.1603776 L9.2734332,29.1603776 C9.3463943,29.1603776 13.5370004,29.1037164 22.7285464,22.5628315 C22.9307417,22.4188498 23.2020173,22.4192379 23.4034365,22.5624434 C32.7141264,29.1871559 36.8158597,29.1545563 36.8632068,29.1603776 C37.0436691,29.1440778 37.2284004,29.2403244 37.342111,29.3885751 C37.4558216,29.537602 37.4907498,29.7320356 37.436029,29.9113336 C37.4049817,30.0145658 36.6369497,32.4630316 33.232616,37.0894638 C33.1301599,39.1040439 31.4768925,40.7107404 29.4595958,40.7107404" id="Fill-112"></path>
                        <polygon id="Fill-113" points="22.4840491 40.128604 23.6483219 40.128604 23.6483219 0.910461364 22.4840491 0.910461364"></polygon>
                        <path d="M13.4783339,38.9264627 C14.1481128,39.9978328 15.3300144,40.7107404 16.6735514,40.7107404 C18.0176756,40.7107404 19.2001435,39.997741 19.8701919,38.9262558 C20.5400941,39.997741 21.7223117,40.7107404 23.0661855,40.7107404 C24.4100909,40.7107404 25.5923325,39.9977075 26.2622264,38.9261802 C26.9323496,39.9977075 28.1149141,40.7107404 29.4588196,40.7107404 C30.8021004,40.7107404 31.9839087,39.9978389 32.6536576,38.9264765 C33.3235842,39.9978389 34.5057317,40.7107404 35.8495132,40.7107404 C37.1933812,40.7107404 38.3757559,39.9977472 39.0457743,38.9262697 C39.7156781,39.9977472 40.8978912,40.7107404 42.2417592,40.7107404 C44.3246433,40.7107404 46.0194365,38.9973189 46.0194365,36.8911493 L44.8551637,36.8911493 C44.8551637,38.3554165 43.6827409,39.5464676 42.2417592,39.5464676 C40.8003894,39.5464676 39.6279667,38.3554165 39.6279667,36.8911493 L39.0458303,36.8911493 L38.4636938,36.8911493 C38.4636938,38.3554165 37.290883,39.5464676 35.8495132,39.5464676 C34.4085315,39.5464676 33.2357207,38.3554165 33.2357207,36.8911493 L32.6535843,36.8911493 L32.0714478,36.8911493 C32.0714478,38.3554165 30.8994132,39.5464676 29.4588196,39.5464676 C28.0170617,39.5464676 26.8442509,38.3554165 26.8442509,36.8911493 L26.2621144,36.8911493 L25.679978,36.8911493 C25.679978,38.3554165 24.5075553,39.5464676 23.0661855,39.5464676 C21.6248157,39.5464676 20.452393,38.3554165 20.452393,36.8911493 L19.8702565,36.8911493 L19.2881201,36.8911493 C19.2881201,38.3554165 18.1153093,39.5464676 16.6735514,39.5464676 C15.2325697,39.5464676 14.060535,38.3554165 14.060535,36.8911493 L13.4783986,36.8911493 L12.8962622,36.8911493 C12.8962622,38.3554165 11.7234514,39.5464676 10.2824697,39.5464676 C8.84148797,39.5464676 7.66867713,38.3554165 7.66867713,36.8911493 L7.08654071,36.8911493 L6.50440429,36.8911493 C6.50440429,38.3554165 5.33198153,39.5464676 3.89022366,39.5464676 C2.44924197,39.5464676 1.27681922,38.3554165 1.27681922,36.8911493 L0.112546375,36.8911493 C0.112546375,38.9973189 1.80733954,40.7107404 3.89022366,40.7107404 C5.23409167,40.7107404 6.41646631,39.9977472 7.08648473,38.9262697 C7.75638851,39.9977472 8.93860165,40.7107404 10.2824697,40.7107404 C11.626257,40.7107404 12.8084089,39.9978328 13.4783339,38.9264627 Z" id="Combined-Shape"></path>
                        <path d="M13.4783986,42.7509345 L14.060535,42.7509345 C14.060535,44.2155898 15.2325697,45.4066409 16.6735514,45.4066409 C18.1153093,45.4066409 19.2881201,44.2155898 19.2881201,42.7509345 L19.8702565,42.7509345 L20.452393,42.7509345 C20.452393,44.2155898 21.6248157,45.4066409 23.0661855,45.4066409 C24.5075553,45.4066409 25.679978,44.2155898 25.679978,42.7509345 L26.2621144,42.7509345 L26.8442509,42.7509345 C26.8442509,44.2155898 28.0170617,45.4066409 29.4588196,45.4066409 C30.8994132,45.4066409 32.0714478,44.2155898 32.0714478,42.7509345 L32.6535843,42.7509345 L33.2357207,42.7509345 C33.2357207,44.2155898 34.4085315,45.4066409 35.8495132,45.4066409 C37.290883,45.4066409 38.4636938,44.2155898 38.4636938,42.7509345 L39.6279667,42.7509345 C39.6279667,44.8574922 37.9327854,46.5709137 35.8495132,46.5709137 C34.5057317,46.5709137 33.3235842,45.8580123 32.6536576,44.7865457 C31.9839087,45.8580123 30.8021004,46.5709137 29.4588196,46.5709137 C28.1149141,46.5709137 26.9323496,45.8578808 26.2622264,44.7862493 C25.5923325,45.8578808 24.4100909,46.5709137 23.0661855,46.5709137 C21.7223117,46.5709137 20.5400941,45.8579143 19.8701919,44.786325 C19.2001435,45.8579143 18.0176756,46.5709137 16.6735514,46.5709137 C15.3300144,46.5709137 14.1481128,45.8580061 13.4783339,44.7865318 C12.8084089,45.8580061 11.626257,46.5709137 10.2824697,46.5709137 C8.19919745,46.5709137 6.50440429,44.8574922 6.50440429,42.7509345 L7.66867713,42.7509345 C7.66867713,44.2155898 8.84148797,45.4066409 10.2824697,45.4066409 C11.7234514,45.4066409 12.8962622,44.2155898 12.8962622,42.7509345 L13.4783986,42.7509345 Z" id="Combined-Shape"></path>
                        <path d="M16.3642429,12.5613397 L29.7685162,12.5613397 C29.3757681,11.7925315 29.1743489,10.7357599 29.1743489,9.68636197 C29.1743489,8.63696404 29.3757681,7.58019239 29.7685162,6.81138423 L16.3642429,6.81138423 C16.7566029,7.58019239 16.9580221,8.63696404 16.9580221,9.68636197 C16.9580221,10.7357599 16.7566029,11.7925315 16.3642429,12.5613397 L16.3642429,12.5613397 Z M31.3158348,13.7256126 L14.8165362,13.7256126 C14.4951969,13.7256126 14.2343998,13.4648154 14.2343998,13.1434761 C14.2343998,12.8221368 14.4951969,12.5613397 14.8165362,12.5613397 C15.1087687,12.5613397 15.7937492,11.5833505 15.7937492,9.68636197 C15.7937492,7.78937341 15.1087687,6.81138423 14.8165362,6.81138423 C14.4951969,6.81138423 14.2343998,6.55058711 14.2343998,6.2292478 C14.2343998,5.9079085 14.4951969,5.64711138 14.8165362,5.64711138 L31.3158348,5.64711138 C31.6371741,5.64711138 31.8979712,5.9079085 31.8979712,6.2292478 C31.8979712,6.55058711 31.6371741,6.81138423 31.3158348,6.81138423 C31.0236023,6.81138423 30.3386218,7.78937341 30.3386218,9.68636197 C30.3386218,11.5833505 31.0236023,12.5613397 31.3158348,12.5613397 C31.6371741,12.5613397 31.8979712,12.8221368 31.8979712,13.1434761 C31.8979712,13.4648154 31.6371741,13.7256126 31.3158348,13.7256126 L31.3158348,13.7256126 Z" id="Fill-128"></path>
                    </g>
                </g>
                <g id="scan__found__treasure" transform="translate(192.000000, 161.000000)">
.........完整代码请登录后点击上方下载按钮下载查看