Created
December 9, 2014 11:32
-
-
Save las3r/a6da1e55319a1ad317ae to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
| <div id="colorWheel"> | |
| <span class="color01"></span> | |
| <span class="color02"></span> | |
| <span class="color03"></span> | |
| <span class="color04"></span> | |
| <span class="color05"></span> | |
| <span class="color06"></span> | |
| <span class="color07"></span> | |
| <span class="color08"></span> | |
| <span class="color09"></span> | |
| <span class="color10"></span> | |
| </div> |
This file contains 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
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @mixin transition($speed: 0.2s, $easing: ease) { | |
| -webkit-transition: all $speed $easing; | |
| -moz-transition: all $speed $easing; | |
| -ms-transition: all $speed $easing; | |
| -o-transition: all $speed $easing; | |
| transition: all $speed $easing; | |
| } | |
| @mixin noselect() { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| @mixin rotate($degrees: 90) { | |
| -webkit-transform: rotate(#{$degrees}deg); | |
| -moz-transform: rotate(#{$degrees}deg); | |
| -ms-transform: rotate(#{$degrees}deg); | |
| -o-transform: rotate(#{$degrees}deg); | |
| transform: rotate(#{$degrees}deg); | |
| } | |
| @mixin origin($x, $y) { | |
| -webkit-transform-origin: $x $y; | |
| -moz-transform-origin: $x $y; | |
| -ms-transform-origin: $x $y; | |
| -o-transform-origin: $x $y; | |
| transform-origin: $x $y; | |
| } | |
| @mixin swatch($color) { | |
| border-color: $color transparent transparent transparent; | |
| } | |
| @mixin animationCount($count: 1){ | |
| -webkit-animation-iteration-count: $count; | |
| -moz-animation-iteration-count: $count; | |
| -o-animation-iteration-count: $count; | |
| -ms-animation-iteration-count: $count; | |
| animation-iteration-count: $count; | |
| } | |
| @mixin intro($name: introAnimation, $length: 3s, $easing: ease) { | |
| animation: $name $length $easing; | |
| -webkit-animation: $name $length $easing; | |
| -moz-animation: $name $length $easing; | |
| -o-animation: $name $length $easing; | |
| -ms-animation: $name $length $easing; | |
| } | |
| @mixin introAnimation() { | |
| @include intro(); | |
| @include animationCount(1); | |
| } | |
| @keyframes introAnimation{ | |
| 0% { | |
| @include rotate(0); | |
| } | |
| 50% { | |
| @include rotate(720); | |
| } | |
| 100% { | |
| @include rotate(0); | |
| } | |
| } | |
| @-moz-keyframes introAnimation{ | |
| 0% { | |
| @include rotate(0); | |
| } | |
| 50% { | |
| @include rotate(720); | |
| } | |
| 100% { | |
| @include rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes introAnimation { | |
| 0% { | |
| @include rotate(0); | |
| } | |
| 50% { | |
| @include rotate(720); | |
| } | |
| 100% { | |
| @include rotate(0); | |
| } | |
| } | |
| @-o-keyframes introAnimation { | |
| 0% { | |
| @include rotate(0); | |
| } | |
| 50% { | |
| @include rotate(720); | |
| } | |
| 100% { | |
| @include rotate(0); | |
| } | |
| } | |
| @-ms-keyframes introAnimation { | |
| 0% { | |
| @include rotate(0); | |
| } | |
| 50% { | |
| @include rotate(720); | |
| } | |
| 100% { | |
| @include rotate(0); | |
| } | |
| } | |
| $theme_Blue: #E4312C; | |
| $theme_Green: #F18E00; | |
| $theme_LightGreen: #FFE600; | |
| $theme_Yellow: #CECD00; | |
| $theme_Orange: #96BF0D; | |
| $theme_Rust: #0092BB; | |
| $theme_Red: #56378A; | |
| $theme_Purple: #952D98; | |
| $theme_Violet: #C3004A; | |
| $theme_grey : #005192; | |
| body { | |
| margin: 60px auto; | |
| background: #F5F5F7; | |
| } | |
| #colorWheel { | |
| -webkit-animation: intro 3s ease; | |
| height: 100px; | |
| width: 100px; | |
| margin: 0 auto ; | |
| position: relative; | |
| @include noselect(); | |
| @include transition(0.5s, linear); | |
| @include introAnimation(); | |
| @include origin(50px, 150px); | |
| span { | |
| $deg: (360 / 10); | |
| position: absolute; | |
| @include origin(50%,50%); | |
| border-style: solid; | |
| border-width: 150px 50px; | |
| box-sizing: border-box; | |
| &.color01 { | |
| @include rotate($deg * 0); | |
| @include swatch($theme_Blue); | |
| } | |
| &.color02{ | |
| @include rotate($deg * 1); | |
| @include swatch($theme_Green); | |
| } | |
| &.color03{ | |
| @include rotate($deg * 2); | |
| @include swatch($theme_LightGreen); | |
| } | |
| &.color04{ | |
| @include rotate($deg * 3); | |
| @include swatch($theme_Yellow); | |
| } | |
| &.color05{ | |
| @include rotate($deg * 4); | |
| @include swatch($theme_Orange); | |
| } | |
| &.color06{ | |
| @include rotate($deg * 5); | |
| @include swatch($theme_Rust); | |
| } | |
| &.color07{ | |
| @include rotate($deg * 6); | |
| @include swatch($theme_grey); | |
| } | |
| &.color08{ | |
| @include rotate($deg * 7); | |
| @include swatch($theme_Red); | |
| } | |
| &.color09{ | |
| @include rotate($deg * 8); | |
| @include swatch($theme_Purple); | |
| } | |
| &.color10{ | |
| @include rotate($deg * 9); | |
| @include swatch($theme_Violet); | |
| } | |
| } | |
| &:before { | |
| content: ""; | |
| width: 300px; | |
| height: 300px; | |
| overflow: hidden; | |
| position: absolute; | |
| top: -30px; | |
| left: -130px; | |
| border-radius: 100%; | |
| border: 30px solid rgba(white, 100%); | |
| z-index: 100; | |
| } | |
| &:after { | |
| content: ""; | |
| width: 100px; | |
| height: 100px; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 100px; | |
| left: 0px; | |
| border-radius: 100%; | |
| background: url("http://oi59.tinypic.com/210ye6q.jpg") no-repeat center center #fff; | |
| } | |
| } |
This file contains 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
| @keyframes introAnimation { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(720deg); | |
| -moz-transform: rotate(720deg); | |
| -ms-transform: rotate(720deg); | |
| -o-transform: rotate(720deg); | |
| transform: rotate(720deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @-moz-keyframes introAnimation { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(720deg); | |
| -moz-transform: rotate(720deg); | |
| -ms-transform: rotate(720deg); | |
| -o-transform: rotate(720deg); | |
| transform: rotate(720deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @-webkit-keyframes introAnimation { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(720deg); | |
| -moz-transform: rotate(720deg); | |
| -ms-transform: rotate(720deg); | |
| -o-transform: rotate(720deg); | |
| transform: rotate(720deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @-o-keyframes introAnimation { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(720deg); | |
| -moz-transform: rotate(720deg); | |
| -ms-transform: rotate(720deg); | |
| -o-transform: rotate(720deg); | |
| transform: rotate(720deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @-ms-keyframes introAnimation { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(720deg); | |
| -moz-transform: rotate(720deg); | |
| -ms-transform: rotate(720deg); | |
| -o-transform: rotate(720deg); | |
| transform: rotate(720deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| } | |
| body { | |
| margin: 60px auto; | |
| background: #F5F5F7; | |
| } | |
| #colorWheel { | |
| -webkit-animation: intro 3s ease; | |
| height: 100px; | |
| width: 100px; | |
| margin: 0 auto; | |
| position: relative; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| -webkit-transition: all 0.5s linear; | |
| -moz-transition: all 0.5s linear; | |
| -ms-transition: all 0.5s linear; | |
| -o-transition: all 0.5s linear; | |
| transition: all 0.5s linear; | |
| animation: introAnimation 3s ease; | |
| -webkit-animation: introAnimation 3s ease; | |
| -moz-animation: introAnimation 3s ease; | |
| -o-animation: introAnimation 3s ease; | |
| -ms-animation: introAnimation 3s ease; | |
| -webkit-animation-iteration-count: 1; | |
| -moz-animation-iteration-count: 1; | |
| -o-animation-iteration-count: 1; | |
| -ms-animation-iteration-count: 1; | |
| animation-iteration-count: 1; | |
| -webkit-transform-origin: 50px 150px; | |
| -moz-transform-origin: 50px 150px; | |
| -ms-transform-origin: 50px 150px; | |
| -o-transform-origin: 50px 150px; | |
| transform-origin: 50px 150px; | |
| } | |
| #colorWheel span { | |
| position: absolute; | |
| -webkit-transform-origin: 50% 50%; | |
| -moz-transform-origin: 50% 50%; | |
| -ms-transform-origin: 50% 50%; | |
| -o-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| border-style: solid; | |
| border-width: 150px 50px; | |
| box-sizing: border-box; | |
| } | |
| #colorWheel span.color01 { | |
| -webkit-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| border-color: #E4312C transparent transparent transparent; | |
| } | |
| #colorWheel span.color02 { | |
| -webkit-transform: rotate(36deg); | |
| -moz-transform: rotate(36deg); | |
| -ms-transform: rotate(36deg); | |
| -o-transform: rotate(36deg); | |
| transform: rotate(36deg); | |
| border-color: #F18E00 transparent transparent transparent; | |
| } | |
| #colorWheel span.color03 { | |
| -webkit-transform: rotate(72deg); | |
| -moz-transform: rotate(72deg); | |
| -ms-transform: rotate(72deg); | |
| -o-transform: rotate(72deg); | |
| transform: rotate(72deg); | |
| border-color: #FFE600 transparent transparent transparent; | |
| } | |
| #colorWheel span.color04 { | |
| -webkit-transform: rotate(108deg); | |
| -moz-transform: rotate(108deg); | |
| -ms-transform: rotate(108deg); | |
| -o-transform: rotate(108deg); | |
| transform: rotate(108deg); | |
| border-color: #CECD00 transparent transparent transparent; | |
| } | |
| #colorWheel span.color05 { | |
| -webkit-transform: rotate(144deg); | |
| -moz-transform: rotate(144deg); | |
| -ms-transform: rotate(144deg); | |
| -o-transform: rotate(144deg); | |
| transform: rotate(144deg); | |
| border-color: #96BF0D transparent transparent transparent; | |
| } | |
| #colorWheel span.color06 { | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| -o-transform: rotate(180deg); | |
| transform: rotate(180deg); | |
| border-color: #0092BB transparent transparent transparent; | |
| } | |
| #colorWheel span.color07 { | |
| -webkit-transform: rotate(216deg); | |
| -moz-transform: rotate(216deg); | |
| -ms-transform: rotate(216deg); | |
| -o-transform: rotate(216deg); | |
| transform: rotate(216deg); | |
| border-color: #005192 transparent transparent transparent; | |
| } | |
| #colorWheel span.color08 { | |
| -webkit-transform: rotate(252deg); | |
| -moz-transform: rotate(252deg); | |
| -ms-transform: rotate(252deg); | |
| -o-transform: rotate(252deg); | |
| transform: rotate(252deg); | |
| border-color: #56378A transparent transparent transparent; | |
| } | |
| #colorWheel span.color09 { | |
| -webkit-transform: rotate(288deg); | |
| -moz-transform: rotate(288deg); | |
| -ms-transform: rotate(288deg); | |
| -o-transform: rotate(288deg); | |
| transform: rotate(288deg); | |
| border-color: #952D98 transparent transparent transparent; | |
| } | |
| #colorWheel span.color10 { | |
| -webkit-transform: rotate(324deg); | |
| -moz-transform: rotate(324deg); | |
| -ms-transform: rotate(324deg); | |
| -o-transform: rotate(324deg); | |
| transform: rotate(324deg); | |
| border-color: #C3004A transparent transparent transparent; | |
| } | |
| #colorWheel:before { | |
| content: ""; | |
| width: 300px; | |
| height: 300px; | |
| overflow: hidden; | |
| position: absolute; | |
| top: -30px; | |
| left: -130px; | |
| border-radius: 100%; | |
| border: 30px solid white; | |
| z-index: 100; | |
| } | |
| #colorWheel:after { | |
| content: ""; | |
| width: 100px; | |
| height: 100px; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 100px; | |
| left: 0px; | |
| border-radius: 100%; | |
| background: url("http://oi59.tinypic.com/210ye6q.jpg") no-repeat center center #fff; | |
| } |
This file contains 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
| <div id="colorWheel"> | |
| <span class="color01"></span> | |
| <span class="color02"></span> | |
| <span class="color03"></span> | |
| <span class="color04"></span> | |
| <span class="color05"></span> | |
| <span class="color06"></span> | |
| <span class="color07"></span> | |
| <span class="color08"></span> | |
| <span class="color09"></span> | |
| <span class="color10"></span> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment