纯css实现理发店旋转灯动画效果

纯css实现理发店旋转灯动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

:root {
  --color-background: #fcf8f3;
  --color-primary: #e7305b;
  --color-border: #4d3e3e;
  --color-white: #f9f9f9;
}

body {
  background-color: var(--color-background);
}

.barber-pole {
  width: 40px;
  height: 100px;
  border: 6px solid var(--color-border);
  background: linear-gradient(-45deg, var(--color-primary), var(--color-primary) 25%, var(--color-white) 25%, var(--color-white) 50%, var(--color-primary) 50%, var(--color-primary) 75%, var(--color-white) 75%, var(--color-white) 100%);
  background-size: 40px 40px;
  -webkit-animation: scrolling-gradient 1s linear infinite;
          animation: scrolling-gradient 1s linear infinite;
}
.barber-pole-top, .barber-pole-bottom {
  position: absolute;
  width: 54px;
  height: 20px;
  border-radius: 99px;
  background-color: var(--color-white);
  border: 6px solid var(--color-border);
}
.barber-pole-top:before, .barber-pole-bottom:before {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  z-index: -1;
  border-radius: 16px;
  background-color: var(--color-white);
  border: 6px solid var(--color-border);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.barber-pole-top {
  top: -20px;
  left: -13px;
}
.barber-pole-top:before {
  top: -24px;
}
.barber-pole-bottom {
  bottom: -20px;
  left: -13px;
}
.barber-pole-bottom:before {
  bottom: -24px;
}

@-webkit-keyframes scrolling-gradient {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 40px;
  }
}

@keyframes scrolling-gradient {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 40px;
  }
}
.barber-pole {
  top: calc(50% - 60px);
  left: calc(50% - 20px);
  position: absolute;
}
</style>

</head>
<body translate="no">
<div class="barber-pole">
<div class="barber-pole-top"></div>
<div class="barber-pole-bottom"></div>
</div>
</body>
</html>

网友评论0