纯css 条纹动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css 条纹动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.stripes {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.stripe {
  position: relative;
  margin: 0 1px;
  border-radius: 999px;
  -webkit-animation: motion 3s ease-in-out infinite alternate;
          animation: motion 3s ease-in-out infinite alternate;
}
.stripe::before {
  content: '';
  position: absolute;
  bottom: calc(-100% - 1px);
  height: 100%;
  width: 100%;
  background: #000;
  border-radius: 999px;
}
.stripe::after {
  content: '';
  position: absolute;
  bottom: calc(-200% - 2px);
  height: 100%;
  width: 100%;
  background: #000;
  border-radius: 999px;
}
.stripe:nth-child(1) {
  width: 13.1vw;
  height: 66%;
  background: #63d6ed;
  -webkit-animation-delay: 10ms;
          animation-delay: 10ms;
}
.stripe:nth-child(1)::before {
  background: #c7ffed;
}
.stripe:nth-child(1)::after {
  background: #63d6ed;
}
.stripe:nth-child(2) {
  width: 7.1vw;
  height: 69%;
  background: #32a1ca;
  -webkit-animation-delay: 20ms;
          animation-delay: 20ms;
}
.stripe:nth-child(2)::before {
  background: #96d3ca;
}
.stripe:nth-child(2)::after {
  background: #32a1ca;
}
.stripe:nth-child(3) {
  width: 18.1vw;
  height: 46%;
  background: #58a7c6;
  -webkit-animation-delay: 30ms;
          animation-delay: 30ms;
}
.stripe:nth-child(3)::before {
  background: #bcd9c6;
}
.stripe:nth-child(3)::after {
  background: #58a7c6;
}
.stripe:nth-child(4) {
  width: 19.1vw;
  height: 77%;
  background: #1af0a5;
  -webkit-animation-delay: 40ms;
          animation-delay: 40ms;
}
.stripe:nth-child(4)::before {
  background: #7effa5;
}
.stripe:nth-child(4)::after {
  background: #1af0a5;
}
.stripe:nth-child(5) {
  width: 5.1vw;
  height: 37%;
  background: #1fa6ee;
  -webkit-animation-delay: 50ms;
          animation-delay: 50ms;
}
.stripe:nth-child(5)::before {
  background: #83d8ee;
}
.stripe:nth-child(5)::after {
  background: #1fa6ee;
}
.stripe:nth-child(6) {
  width: 10.1vw;
  height: 70%;
  background: #1bc5f6;
  -webkit-animation-delay: 60ms;
          animation-delay: 60ms;
}
.stripe:nth-child(6)::before {
  background: #7ff7f6;
}
.stripe:nth-child(6)::after {
  background: #1bc5f6;
}
.stripe:nth-child(7) {
  width: 15.1vw;
  height: 32%;
  background: #0ad8ec;
  -webkit-animation-delay: 70ms;
          animation-delay: 70ms;
}
.stripe:nth-child(7)::before {
  background: #6effec;
}
.stripe:nth-child(7)::after {
  background: #0ad8ec;
}
.stripe:nth-child(8) {
  width: 15.1vw;
  height: 32%;
  background: #0cd7af;
  -webkit-animation-delay: 80ms;
          animation-delay: 80ms;
}
.stripe:nth-child(8)::before {
  background: #70ffaf;
}
.stripe:nth-child(8)::after {
  background: #0cd7af;
}
.stripe:nth-child(9) {
  width: 9.1vw;
  height: 53%;
  background: #48eeac;
  -webkit-animation-delay: 90ms;
          animation-delay: 90ms;
}
.stripe:nth-child(9)::before {
  background: #acffac;
}
.stripe:nth-child(9)::after {
  background: #48eeac;
}
.stripe:nth-child(10) {
  width: 20.1vw;
  height: 63%;
  background: #46b7f8;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.stripe:nth-child(10)::before {
  background: #aae9f8;
}
.stripe:nth-child(10)::after {
  background: #46b7f8;
}
.stripe:nth-child(11) {
  width: 7.1vw;
  height: 65%;
  background: #4ed8ed;
  -webkit-animation-delay: 110ms;
          animation-delay: 110ms;
}
.stripe:nth-child(11)::before {
  background: #b2ffed;
}
.stripe:nth-child(11)::after {
  background: #4ed8ed;
}
.stripe:nth-child(12) {
  width: 11.1vw;
  height: 36%;
  background: #0fd3e1;
  -webkit-animation-delay: 120ms;
          animation-delay: 120ms;
}
.stripe:nth-child(12)::before {
  background: #73ffe1;
}
.stripe:nth-child(12)::after {
  background: #0fd3e1;
}
.stripe:nth-child(13) {
  width: 17.1vw;
  height: 43%;
  background: #2ced9f;
  -webkit-animation-delay: 130ms;
          animation-delay: 130ms;
}
.stripe:nth-child(13)::before {
  background: #90ff9f;
}
.stripe:nth-child(13)::after {
  background: #2ced9f;
}
.stripe:nth-child(14) {
  width: 2.1vw;
  height: 67%;
  background: #03f6d4;
  -webkit-animation-delay: 140ms;
          animation-delay: 140ms;
}
.stripe:nth-child(14)::before {
  background: #67ffd4;
}
.stripe:nth-child(14)::after {
  background: #03f6d4;
}
.stripe:nth-child(15) {
  width: 5.1vw;
  height: 78%;
  background: #42aea2;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
.stripe:nth-child(15)::before {
  background: #a6e0a2;
}
.stripe:nth-child(15)::after {
  background: #42aea2;
}
.stripe:nth-child(16) {
  width: 18.1vw;
  height: 61%;
  background: #2af9b4;
  -webkit-animation-delay: 160ms;
          animation-delay: 160ms;
}
.stripe:nth-child(16)::before {
  background: #8effb4;
}
.stripe:nth-child(16)::after {
  background: #2af9b4;
}
.stripe:nth-child(17) {
  width: 10.1vw;
  height: 80%;
  background: #1ebdc2;
  -webkit-animation-delay: 170ms;
          animation-delay: 170ms;
}
.stripe:nth-child(17)::before {
  background: #82efc2;
}
.stripe:nth-child(17)::after {
  background: #1ebdc2;
}
.stripe:nth-child(18) {
  width: 12.1vw;
  height: 75%;
  background: #3ddef5;
  -webkit-animation-delay: 180ms;
          animation-delay: 180ms;
}
.stripe:nth-child(18)::before {
  background: #a1fff5;
}
.stripe:nth-child(18)::after {
  background: #3ddef5;
}
.stripe:nth-child(19) {
  width: 1.1vw;
  height: 47%;
  background: #59e2b1;
  -webkit-animation-delay: 190ms;
          animation-delay: 190ms;
}
.stripe:nth-child(19)::before {
  background: #bdffb1;
}
.stripe:nth-child(19)::after {
  background: #59e2b1;
}
.stripe:nth-child(20) {
  width: 13.1vw;
  height: 40%;
  background: #21afbb;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.........完整代码请登录后点击上方下载按钮下载查看