web前端小案例-css制作彩色圆环弹跳

web前端群，189394454，有视频、源码、学习方法等大量干货分享

这个效果是由纯css代码制作，布局相对简单，有正在学习前端基础的小伙伴可以用来练习一下，现在越来越多的企业重视起基础知识了，所以有要找工作的小伙伴和正在找工作的小伙伴记得多练习基础的知识，把基础练扎实哦。
👇html代码：

<div class='contain'>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
  <svg height='80' width='210'>
    <ellipse cx='25' cy='20' fill='none' rx='10' ry='10'></ellipse>
  </svg>
</div>

👇css代码：

  <style>
.contain {
  position: relative;
  margin: 155px auto;
  width: 200px;
}

svg {
  position: absolute;
}
svg ellipse {
  -webkit-transform-origin: center;
          transform-origin: center;
}
svg:nth-of-type(1) ellipse {
  stroke: #F1725D;
  cx: 25px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}
svg:nth-of-type(2) ellipse {
  stroke: #38BDAB;
  cx: 65px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
}
svg:nth-of-type(3) ellipse {
  stroke: #9D30A5;
  cx: 105px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
svg:nth-of-type(4) ellipse {
  stroke: #B779E2;
  cx: 145px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
}
svg:nth-of-type(5) ellipse {
  stroke: #683893;
  cx: 185px;
  stroke-width: 3px;
  -webkit-animation: jump 600ms infinite ease-in-out;
          animation: jump 600ms infinite ease-in-out;
  opacity: .7;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}
svg:nth-of-type(6) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 25px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}
svg:nth-of-type(7) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 65px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
}
svg:nth-of-type(8) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 105px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
svg:nth-of-type(9) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 145px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
}
svg:nth-of-type(10) ellipse {
  fill: #333333;
  opacity: .05;
  rx: 0;
  ry: 0;
  cx: 185px;
  cy: 48px;
  -webkit-animation: shadow 600ms infinite ease-in-out;
          animation: shadow 600ms infinite ease-in-out;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

@-webkit-keyframes jump {
  40% {
    -webkit-transform: translateY(20px) scale(1.3);
            transform: translateY(20px) scale(1.3);
    opacity: .9;
  }
  40% {
    rx: 10px;
    ry: 10px;
    stroke-width: 3px;
  }
  45% {
    rx: 15px;
    ry: 7px;
    stroke-width: 4px;
  }
  55% {
    rx: 10px;
    ry: 10px;
  }
}

@keyframes jump {
  40% {
    -webkit-transform: translateY(20px) scale(1.3);
            transform: translateY(20px) scale(1.3);
    opacity: .9;
  }
  40% {
    rx: 10px;
    ry: 10px;
    stroke-width: 3px;
  }
  45% {
    rx: 15px;
    ry: 7px;
    stroke-width: 4px;
  }
  55% {
    rx: 10px;
    ry: 10px;
  }
}
@-webkit-keyframes shadow {
  45% {
    opacity: .15;
    rx: 10px;
    ry: 3px;
    -webkit-transform: translateY(5px) scale(1.3);
            transform: translateY(5px) scale(1.3);
  }
}
@keyframes shadow {
  45% {
    opacity: .15;
    rx: 10px;
    ry: 3px;
    -webkit-transform: translateY(5px) scale(1.3);
            transform: translateY(5px) scale(1.3);
  }
}

  </style>