Pure CSS. Inspiration:
A Pen by Anonasaurus Rex on CodePen.
Created
March 17, 2014 12:13
-
-
Save anonymous/9598186 to your computer and use it in GitHub Desktop.
A Pen by A Non Ymous.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .scene | |
| -(2..4).each do |i| | |
| - if i != 4 | |
| .assembly.nope | |
| - else | |
| .assembly | |
| .strip | |
| -(1..2).each do | |
| .roller | |
| -(1..i).each do | |
| .side |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* By @passcod | |
| Adapted from http://codepen.io/thebabydino/pen/pzgiE | |
| I think it would be nice as a spinner / loading animation somewhere. Also try commenting out the .assembly.nope line for an alternative form. */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass"; | |
| $w: 3em; | |
| $h: 4em; | |
| $c: #f5f5f5; | |
| $d: #00acd2; | |
| $e: #ff5954; | |
| html, body { height: 100%; } | |
| .nope { display: none; } | |
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| perspective: 80em; | |
| perspective-origin: 50% 00%; | |
| background: $c; | |
| color: $c; | |
| } | |
| .scene { | |
| &, * { | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform-style: preserve-3d; | |
| } | |
| transform: translate(-15em, 15em) rotateX(75deg) rotate(22.5deg) | |
| } | |
| .assembly { | |
| @for $i from 1 to 15 { | |
| $ca: 360deg/($i + 1); | |
| $ri: ($w/2)/(if($i != 1, tan($ca/2), 2)); | |
| $rc: ($w/2)/(if($i != 1, sin($ca/2), 1)); | |
| &:nth-child(#{$i}) { | |
| z-index: -$i; | |
| transform: translate(0, -1.25*$i*$h); | |
| animation: slide#{$i} 1s ease-in-out infinite; | |
| @at-root { | |
| @keyframes slide#{$i} { | |
| to { transform: translate($w, -1.25*$i*$h); } | |
| } | |
| } | |
| .roller { | |
| transform: rotateY($ca/2) | |
| translateZ($rc) rotateY(-$ca*(1 + .5*($i%2))); | |
| animation: inherit; | |
| animation-name: roll#{$i}a; | |
| &:last-child { | |
| z-index: -1; | |
| margin: 0 4*$w; | |
| transform: rotateY(-$ca/2) | |
| translateZ(-$rc) rotateY(-$ca/2); | |
| animation-name: roll#{$i}b; | |
| } | |
| @at-root { | |
| @keyframes roll#{$i}a { | |
| to { | |
| transform: rotateY(-$ca/2) | |
| translateZ($rc) | |
| rotateY(-$ca*(1 + .5*($i%2))); | |
| } | |
| } | |
| } | |
| @at-root { | |
| @keyframes roll#{$i}b { | |
| to { | |
| transform: rotateY($ca/2) | |
| translateZ(-$rc) | |
| rotateY(-$ca/2); | |
| } | |
| } | |
| } | |
| } | |
| .side { | |
| margin: -$h/2 (-$w/2); | |
| width: $w; height: $h; | |
| @for $j from 0 to $i + 1 { | |
| &:nth-child(#{$j + 1}) { | |
| transform: rotateY($j*$ca) | |
| if($i != 1, translateZ($ri), ()); | |
| @if $i > 2 { | |
| &:before { | |
| height: $ri; | |
| @if $i == 3 { | |
| left: .125em; | |
| width: calc(#{$w} - .125em); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .strip { | |
| margin: -$h/2 -1px; | |
| width: 4*$w; height: $h; | |
| border: solid .125em $c; | |
| background: | |
| linear-gradient(90deg, $c .125em, transparent 0) $d; | |
| background-size: $w 100%; | |
| } | |
| .side { | |
| &:before, &:after { | |
| box-sizing: border-box; | |
| position: absolute; | |
| left: 0; | |
| width: inherit; | |
| backface-visibility: hidden; | |
| content: ''; | |
| } | |
| &:before { | |
| top: 100%; | |
| height: .125em; | |
| transform-origin: 50% 0; | |
| transform: rotateX(-90deg); | |
| border-top: solid .125em $c; | |
| background: $e; | |
| } | |
| &:after { | |
| height: inherit; | |
| border: solid .125em $c; | |
| background: $d; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment