svg+css+js实现数据流量流动示意图动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css+js实现数据流量流动示意图动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
<style>
    @charset "UTF-8";
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  z-index: 0;
  position: relative;
  display: flex;
  align-items: center;
  width: 1080px;
  height: 400px;
  overflow: hidden;
  background: url("//repo.bfw.wiki/bfwrepo/images/xiangce/OJYTLba8CQweWIq.png") no-repeat;
  background-size: cover;
}
.container .logos {
  display: flex;
  align-items: center;
  width: 400px;
  height: 320px;
  overflow: hidden;
  border-radius: 0 200px 200px 0;
  background: radial-gradient(166.55% 283.86% at -39.88% 50%, rgba(255, 255, 255, 0) 65.64%, rgba(0, 238, 255, 0.48) 99%);
}
.container .logos .logos-wrap img {
  height: 40px;
}
.container .logos .logos-wrap .box {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 30px;
}
.container .logos .logos-wrap .box:last-child {
  margin: unset;
}
.container .shenzhi-logo {
  position: relative;
  left: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  box-shadow: 0px 0px 40px rgba(164, 168, 197, 0.24);
  background-color: white;
}
.container .shenzhi-logo img {
  z-index: 99;
  width: 60px;
}
.container .account {
  position: relative;
  left: 90px;
}
.container .lines {
  position: absolute;
  width: 482px;
  height: 100%;
  z-index: -1;
  left: 423px;
  top: 107px;
}
.container .lines .line-1 svg {
  position: absolute;
}
.container .lines .line-1 svg:nth-of-type(3) {
  position: absolute;
  right: 0;
  top: 1px;
}
.container .lines .line-2 {
  position: absolute;
  top: -49px;
}
.container .lines .line-2 svg {
  position: absolute;
}
.container .lines .line-3 {
  position: absolute;
  top: 40px;
}
.container .lines .line-3 svg {
  position: absolute;
}
.container .lines .line-3 svg:nth-of-type(3) {
  position: relative;
  right: -89%;
  top: 87px;
}

.results {
  position: absolute;
  right: 150px;
  z-index: 99;
}
.results .icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  background: #ffffff;
  box-shadow: 0px 8px 40px rgba(164, 168, 197, 0.4);
  border-radius: 59px;
  margin-bottom: 38px;
}
.results .icon::after {
  position: absolute;
  right: -100%;
  content: "";
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #3b426b;
}
.results .icon:last-child {
  margin-bottom: unset;
}
.results .icon:nth-of-type(1)::after {
  content: "下单";
}
.results .icon:nth-of-type(2)::after {
  content: "领劵";
}
.results .icon:nth-of-type(3)::after {
  content: "发帖";
}
.results .icon:nth-of-type(4)::after {
  content: "个人中心";
  right: -83px;
}

#line-1 {
  stroke-dasharray: 60, 600;
  stroke-dashoffset: 24;
  -webkit-animation: line1 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
          animation: line1 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
}
@-webkit-keyframes line1 {
  to {
    stroke-dashoffset: -620;
  }
}
@keyframes line1 {
  to {
    stroke-dashoffset: -620;
  }
}

#line-2 {
  stroke-dasharray: 60, 600;
  stroke-dashoffset: 24;
  -webkit-animation: line2 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite 0.6s;
          animation: line2 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite 0.6s;
}
@-webkit-keyframes line2 {
  to {
    stroke-dashoffset: -620;
  }
}
@keyframes line2 {
  to {
    stroke-dashoffset: -620;
  }
}

#line-3 {
  stroke-dasharray: 60, 600;
  stroke-dashoffset: 24;
  -webkit-animation: line3 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite 0.2s;
          animation: line3 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite 0.2s;
}
@-webkit-keyframes line3 {
  to {
    stroke-dashoffset: -620;
  }
}
@keyframes line3 {
  to {
    stroke-dashoffset: -620;
  }
}

.container .shenzhi-logo {
  -webkit-animation: ripple 0.8s linear infinite;
          animation: ripple 0.8s linear infinite;
}
@-webkit-keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 198, 230, 0), 0 0 0 40px rgba(71, 198, 230, 0.18);
  }
  100% {
    box-shadow: 0 0 0 40px rgba(71, 198, 230, 0.18), 0 0 0 60px rgba(71, 198, 230, 0);
  }
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 198, 230, 0), 0 0 0 40px rgba(71, 198, 230, 0.18);
  }
  100% {
    box-shadow: 0 0 0 40px rgba(71, 198, 230, 0.18), 0 0 0 60px rgba(71, 198, 230, 0);
  }
}
@-webkit-keyframes scale {
  50% {
    transform: scale(1.15);
  }
  0%, 100% {
    transform: scale(1);
  }
}
@keyframes scale {
  50% {
    transform: scale(1.15);
  }
  0%, 100% {
    transform: scale(1);
  }
}
.container .shenzhi-logo::after {
  z-index: 0;
  border-radius: 100%;
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 40px rgba(164, 168, 197, 0.24);
  background-color: white;
  transform: scale(1);
  -webkit-animation: scale 2.5s linear infinite;
          animation: scale 2.5s linear infinite;
}

.logos-1 {
  transition: all 0.2s ease;
  position: relative;
  margin-right: 20px;
  will-change: transform;
  -webkit-animation: logosMoving 10s linear infinite both 1s;
          animation: logosMoving 10s linear infinite both 1s;
}
@-webkit-keyframes logosMoving {
  to {
    transform: translateX(105%);
  }
}
@keyframes logosMoving {
  to {
    transform: translateX(105%);
  }
}

.logos-2 {
  transition: all 0.2s ease;
  will-change: transform;
  -webkit-animation: logosMoving 10s linear infinite both 1s;
          animation: logosMoving 10s linear infinite both 1s;
}

.logos-wrap {
  position: relative;
  left: -100%;
}

.logoShow {
  -webkit-animation: logoShow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
          animation: logoShow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
}
@-webkit-keyframes logoShow {
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
}
@keyframes logoShow {
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
}

.logos-wrap img {
  opacity: 0;
  transform: scale3d(0, 0, 0);
  filter: blur(20px);
  transition: all 0.3s ease-out;
  margin: 4px 14px;
  will-change: transform;
}

.rule {
  position: absolute;
  z-index: 99;
  right: 180px;
}
.rule img {
  z-index: 99;
  width: 94px;
  top: 4px;
  right: -67px;
}
.rule div:nth-of-type(1) {
  position: relative;
  right: 100px;
  top: -40px;
}
.rule div:nth-of-type(1)::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  border-radius: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #f88787 100%);
  position: absolute;
  transform: scale(0);
  -webkit-animation: popShow3 4s cubic-bezier(0.5, 1, 0.89, 1) infinite;
          animation: popShow3 4s cubic-bezier(0.5, 1, 0.89, 1) infinite;
}
@-webkit-keyframes popShow3 {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@keyframes popShow3 {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
.rule div:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  border-radius: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #f88787 100%);
  position: absolute;
  transform: scale(0);
  -webkit-animation: popShow 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.2s;
          animation: popShow 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.2s;
}
@-webkit-keyframes popShow {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes popShow {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
.rule div:nth-of-type(2) {
  position: relative;
  right: 125px;
  top: -90px;
}
.rule div:nth-of-type(2)::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  border-radius: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #2e2e2e 100%);
  position: absolute;
  transform: scale(0);
  -webkit-animation: popShow2 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.35s;
          animation: popShow2 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.35s;
}
@-webkit-keyframes popShow2 {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@keyframes popShow2 {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
.rule div:nth-of-type(2)::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  border-radius: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #2e2e2e 100%);
  position: absolute;
  transform: scale(0);
  -webkit-animation: popShow 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.6s;
          animation: popShow 4s cubic-bezier(0.5, 1, 0.89, 1) infinite 0.6s;
}
@keyframes popShow {
  80% {
    opacity: 0;
    transform: scale(0);
  }
  91% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.rule-2 {
  position: absolute;
}

.rule-1 {
  position: absolute;
}

.box-1,
.box-3 {
  left: -20%;
  position: relative;
}

.dr {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 100px;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container">
        <div class="logos">
            <div class="logos-wrap logos-1">
                <div class="box-1 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/PMUofLmJFgt5HEY.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/GyYiwts2v5QTNOz.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/HMK2BAykCTxIVjX.png" alt="" class="logoShow" />
                </div>
                <div class="box-2 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/4ijtAhQEOKNeXzZ.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/L4dRxiDA37SVEQz.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/kLUHC1zcrJVBMAm.png" alt="" class="logoShow" />
                </div>
                <div class="box-3 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/Ygu9rC3dysXFoTD.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/hbv5cMNOfj1QRqr.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/IO2Jcy76lktwP8o.png" alt="" class="logoShow" />
                </div>
            </div>
            <div class="logos-wrap logos-2">
                <div class="box-1 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/PMUofLmJFgt5HEY.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/GyYiwts2v5QTNOz.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/HMK2BAykCTxIVjX.png" alt="" class="logoShow" />
                </div>
                <div class="box-2 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/4ijtAhQEOKNeXzZ.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/L4dRxiDA37SVEQz.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/kLUHC1zcrJVBMAm.png" alt="" class="logoShow" />
                </div>
                <div class="box-3 box">
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/Ygu9rC3dysXFoTD.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/hbv5cMNOfj1QRqr.png" alt="" class="logoShow" />
                    <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/IO2Jcy76lktwP8o.png" alt="" class="logoShow" />
                </div>
            </div>
        </div>
        <div class="shenzhi-logo">
            <img src="//repo.bfw.wiki/bfwrepo/images/xiangce/GiBFjCcZeJzqwpV.png" alt="" />
        </div>
        <div class="account">
            <svg width="110" height="213" viewBox="0 0 110 213" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="110" height="44" rx="4" fill="#7A78EE" />
          <path d="M24 12C18.579 12 14 16.579 14 22C14 27.421 18.579 32 24 32C29.421 32 34 27.421 34 22C34 16.579 29.421 12 24 12ZM24 17C25.727 17 27 18.272 27 20C27 21.728 25.727 23 24 23C22.274 23 21 21.728 21 20C21 18.272 22.274 17 24 17ZM18.894 26.772C19.791 25.452 21.287 24.572 23 24.572H25C26.714 24.572 28.209 25.452 29.106 26.772C27.828 28.14 26.015 29 24 29C21.985 29 20.172 28.14 18.894 26.772Z" fill="white" />
          <path d="M48.734 17.466V26.608H46.102V20.07H44.814V26.608H42.728V27.91H55.286V26.608H50.064V22.45H53.956V21.176H50.064V17.466H54.698V16.164H43.554V17.466H48.734ZM62.328 22.87V23.738H57.946V27.826H59.248V24.942H62.328V28.442H63.672V24.942H66.794V26.02C66.794 26.356 66.598 26.524 66.22 26.524L65.24 26.468L65.59 27.728H66.654C67.62 27.728 68.11 27.252 68.11 26.314V23.738H63.672V22.87H66.78V19.594H59.276V22.87H62.328ZM62.328 15.45V17.48H60.55C60.27 16.808 59.962 16.234 59.64 15.73L58.38 16.192C58.688 16.584 58.968 17.018 59.206 17.48H57.022V20.518H58.366V18.74H67.634V20.504H68.978V17.48H66.654C66.934 17.088 67.228 16.626 67.508 16.094L66.248 15.632C65.968 16.276 65.618 16.892 65.226 17.48H63.672V15.45H62.328ZM65.492 21.764H60.564V20.7H65.492V21.764ZM73.164 20.602H76.384V22.744H73.164V20.602ZM73.094 23.976H76.384V27.966H77.728V23.976H81.2V26.062C81.2 26.608 80.962 26.888 80.514 26.888C80.038 26.888 79.534 26.86 78.988 26.818L79.338 28.12H80.948C82.012 28.12 82.558 27.588 82.558 26.538V15.996H71.82V22.856C71.792 24.704 71.358 26.23 70.518 27.434L71.54 28.344C72.408 27.196 72.926 25.74 73.094 23.976ZM81.2 22.744H77.728V20.602H81.2V22.744ZM81.2 19.384H77.728V17.284H.........完整代码请登录后点击上方下载按钮下载查看