纯css实现理发店旋转灯动画效果-html代码-BFW代码库

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

代码语言：html

所属分类：动画

代码描述：纯css实现理发店旋转灯动画效果

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

<!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: a.........完整代码请登录后点击上方下载按钮下载查看