| #stripey ■ |
Something like this could expand outwards forever with enough box-shadows, but I limited myself to two (plus two more on each pseudo element).
The only real trickiness here is using a border-style of "double" and a background-clip property of "content".
Let me know if you can think of a way to add more! (gradient background, perhaps?)
A Pen by Riley Shaw on CodePen.
| @import "compass" | |
| $c1: #e9564b | |
| $c2: #fcfcfc | |
| @keyframes spin | |
| 0% | |
| transform: rotate(0deg) | |
| 100% | |
| transform: rotate(360deg) | |
| @-webkit-keyframes spin | |
| 0% | |
| -webkit-transform: rotate(0deg) | |
| 100% | |
| -webkit-transform: rotate(360deg) | |
| @-moz-keyframes spin | |
| 0% | |
| -moz-transform: rotate(0deg) | |
| 100% | |
| -moz-transform: rotate(360deg) | |
| @-o-keyframes spin | |
| 0% | |
| -o-transform: rotate(0deg) | |
| 100% | |
| -o-transform: rotate(360deg) | |
| html, body | |
| height: 100% | |
| width: 100% | |
| background-color: $c1 | |
| overflow: hidden | |
| #stripey | |
| font-size: 24px | |
| text-align: center | |
| color: $c1 | |
| height: 30px | |
| line-height: 28px | |
| width: 30px | |
| background-color: $c2 | |
| background-clip: content-box | |
| padding: 8px | |
| border: 24px double $c2 | |
| +box-shadow(0 0 0 8px $c1, 0 0 0 16px $c2) // could do this forever... | |
| &:before, &:after | |
| content: '' | |
| position: absolute | |
| border: 24px double $c2 | |
| +box-shadow(0 0 0 8px $c1, 0 0 0 16px $c2) // could do this forever... | |
| &:before | |
| top: -72px | |
| left: -72px | |
| height: 142px | |
| width: 142px | |
| &:after | |
| height: 238px | |
| width: 238px | |
| top: -120px | |
| left: -120px | |
| // center on page | |
| position: absolute | |
| top: 50% | |
| left: 50% | |
| margin: -49px 0 0 -49px | |
| // make it spin | |
| animation: spin 9s infinite linear | |
| -webkit-animation: spin 9s infinite linear | |
| -moz-animation: spin 9s infinite linear | |
| -o-animation: spin 9s infinite linear |