Skip to content

Instantly share code, notes, and snippets.

@josephok
Created April 14, 2014 06:49
Show Gist options
  • Save josephok/10622268 to your computer and use it in GitHub Desktop.
Save josephok/10622268 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
@keyframes rotation {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes rotation {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
section:hover {
animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
}
@mixin yin-yang($width) {
section {
position: relative;
width: $width;
height: $width/2;
border-color: red;
border-style: solid;
border-width: 2px 2px $width/2 + 2px 2px;
border-radius: 100%;
background: #eee;
}
section:before {
position: absolute;
top: 50%;
left: 0;
width: $width/8;
height: $width/8;
border: 3*$width/16 solid red;
border-radius: 100%;
background: #eee;
content: "";
}
section:after {
position: absolute;
top: 50%;
left: 50%;
width: $width/8;
height: $width/8;
border: 3*$width/16 solid #eee;
border-radius: 100%;
background: red;
content: "";
}
}
@include yin-yang(160px);
@keyframes rotation {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes rotation {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
section:hover {
animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
}
section {
position: relative;
width: 160px;
height: 80px;
border-color: red;
border-style: solid;
border-width: 2px 2px 82px 2px;
border-radius: 100%;
background: #eee;
}
section:before {
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
border: 30px solid red;
border-radius: 100%;
background: #eee;
content: "";
}
section:after {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border: 30px solid #eeeeee;
border-radius: 100%;
background: red;
content: "";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment