Skip to content

Instantly share code, notes, and snippets.

@lgarron
Created January 16, 2012 07:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lgarron/1619537 to your computer and use it in GitHub Desktop.
Save lgarron/1619537 to your computer and use it in GitHub Desktop.
Barber Pole
/**
* Barber Pole
*/
.barber_pole::before {
content: "\a0";
float: left;
width: 140%;
height: 10%;
background: #000;
border-radius: 20px 20px 0 0;
margin-top: -45%;
margin-left: -20%
}
.barber_pole {
width: 64px;
height: 256px;
margin: 2em auto;
background-color: gray;
border: 5px solid #000;
background-image: repeating-linear-gradient(-60deg,
white,
white 32px,
blue 32px,
blue 64px,
white 64px,
white 96px,
red 96px,
red 128px
);
animation: scrolling 8s infinite linear;
background-size: 257px 256px;
}
@keyframes scrolling {
100% { background-position: 256px 0px;}
}
<!-- content to be placed inside <body>…</body> -->
<div class="barber_pole">
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment