纯css圆柱体伸缩动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css圆柱体伸缩动画效果

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


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

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

.pistons {
  display: grid;
  grid-template-rows: repeat(5, 80px);
  grid-template-columns: repeat(5, 80px);
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}

.piston {
  position: relative;
  border: 6px solid #000;
  width: 50px;
  height: 200px;
  margin: 0 20px;
  background: -webkit-gradient(linear, left top, right top, from(#cff), color-stop(82%, #368), to(#699));
  background: linear-gradient(90deg, #cff, #368 82%, #699);
  border-radius: 999px;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.piston::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #cff), to(#8dd));
  background: linear-gradient(90deg, #cff 50%, #8dd);
  border-radius: 100%;
}
.piston:nth-child(1) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -885ms;
          animation-delay: -885ms;
  -webkit-animation-duration: 2171ms;
          animation-duration: 2171ms;
}
.piston:nth-child(2) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -352ms;
          animation-delay: -352ms;
  -webkit-animation-duration: 1837ms;
          animation-duration: 1837ms;
}
.piston:nth-child(3) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -246ms;
          animation-delay: -246ms;
  -webkit-animation-duration: 2882ms;
          animation-duration: 2882ms;
}
.piston:nth-child(4) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -892ms;
          animation-delay: -892ms;
  -webkit-animation-duration: 2909ms;
          animation-duration: 2909ms;
}
.piston:nth-child(5) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -183ms;
          animation-delay: -183ms;
  -webkit-animation-duration: 1557ms;
          animation-duration: 1557ms;
}
.piston:nth-child(6) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -765ms;
          animation-delay: -765ms;
  -webkit-animation-duration: 1473ms;
          animation-duration: 1473ms;
}
.piston:nth-child(7) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -187ms;
          animation-delay: -187ms;
  -webkit-animation-duration: 1137ms;
          animation-duration: 1137ms;
}
.piston:nth-child(8) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -31ms;
          animation-delay: -31ms;
  -webkit-animation-duration: 1898ms;
          animation-duration: 1898ms;
}
.piston:nth-child(9) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -77ms;
          animation-delay: -77ms;
  -webkit-animation-duration: 2272ms;
          animation-duration: 2272ms;
}
.piston:nth-child(10) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -350ms;
          animation-delay: -350ms;
  -webkit-animation-duration: 2143ms;
          animation-duration: 2143ms;
}
.piston:nth-child(11) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -154ms;
          animation-delay: -154ms;
  -webkit-animation-duration: 2553ms;
          animation-duration: 2553ms;
}
.piston:nth-child(12) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -988ms;
          animation-delay: -988ms;
  -webkit-animation-duration: 2267ms;
          animation-duration: 2267ms;
}
.piston:nth-child(13) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -808ms;
          animation-delay: -808ms;
  -webkit-animation-duration: 1589ms;
          animation-duration: 1589ms;
}
.piston:nth-child(14) {
  -webkit-animation: piston 2s ease-in-out infinite alternate;
          animation: piston 2s ease-in-out infinite alt.........完整代码请登录后点击上方下载按钮下载查看