Skip to content

Instantly share code, notes, and snippets.

@grejdi

grejdi/group_therapy_ribbons.html

Created March 5, 2014 05:41
Show Gist options
  • Save grejdi/9361865 to your computer and use it in GitHub Desktop.
Save grejdi/9361865 to your computer and use it in GitHub Desktop.
Download ZIP
Above & Beyond's Group Therapy http://jsfiddle.net/dGKhZ/
Raw
group_therapy_ribbons.html
<html>
<head>
<title>blah</title>
<style type="text/css">
@keyframes ribbon13 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes ribbon13 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@keyframes ribbon12 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
}
}
@-webkit-keyframes ribbon12 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
}
}
@keyframes ribbon11 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
}
@-webkit-keyframes ribbon11 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
}
@keyframes ribbon10 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(22.5deg);
-webkit-transform: rotate(22.5deg);
}
}
@-webkit-keyframes ribbon10 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(22.5deg);
-webkit-transform: rotate(22.5deg);
}
}
@keyframes ribbon9 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
}
@-webkit-keyframes ribbon9 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
}
@keyframes ribbon8 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(37.5deg);
-webkit-transform: rotate(37.5deg);
}
}
@-webkit-keyframes ribbon8 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(37.5deg);
-webkit-transform: rotate(37.5deg);
}
}
@keyframes ribbon7 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
@-webkit-keyframes ribbon7 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
}
@keyframes ribbon6 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(52.5deg);
-webkit-transform: rotate(52.5deg);
}
}
@-webkit-keyframes ribbon6 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(52.5deg);
-webkit-transform: rotate(52.5deg);
}
}
@keyframes ribbon5 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
}
@-webkit-keyframes ribbon5 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
}
@keyframes ribbon4 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(67.5deg);
-webkit-transform: rotate(67.5deg);
}
}
@-webkit-keyframes ribbon4 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(67.5deg);
-webkit-transform: rotate(67.5deg);
}
}
@keyframes ribbon3 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(75deg);
-webkit-transform: rotate(75deg);
}
}
@-webkit-keyframes ribbon3 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(75deg);
-webkit-transform: rotate(75deg);
}
}
@keyframes ribbon2 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(82.5deg);
-webkit-transform: rotate(82.5deg);
}
}
@-webkit-keyframes ribbon2 {
from {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
to {
transform: rotate(82.5deg);
-webkit-transform: rotate(82.5deg);
}
}
body {
background: #000;
}
div {
height: 310px;
width: 10px;
position: absolute;
left: 200px;
top: 50px;
}
#ribbon1 {
background-color: #F9E62E;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#ribbon2 {
background-color: #DA6B2C;
transform: rotate(82.5deg);
-webkit-transform: rotate(82.5deg);
animation: ribbon2 2s;
-webkit-animation: ribbon2 2s;
z-index: 2;
}
#ribbon3 {
background-color: #347A34;
transform: rotate(75deg);
-webkit-transform: rotate(75deg);
animation: ribbon3 2s;
-webkit-animation: ribbon3 2s;
z-index: 3;
}
#ribbon4 {
background-color: #C92F2E;
transform: rotate(67.5deg);
-webkit-transform: rotate(67.5deg);
animation: ribbon4 2s;
-webkit-animation: ribbon4 2s;
z-index: 4;
}
#ribbon5 {
background-color: #338ED2;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
animation: ribbon5 2s;
-webkit-animation: ribbon5 2s;
z-index: 5;
}
#ribbon6 {
background-color: #DF9AB9;
transform: rotate(52.5deg);
-webkit-transform: rotate(52.5deg);
animation: ribbon6 2s;
-webkit-animation: ribbon6 2s;
z-index: 6;
}
#ribbon7 {
background-color: #6CA43A;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
animation: ribbon7 2s;
-webkit-animation: ribbon7 2s;
z-index: 7;
}
#ribbon8 {
background-color: #783078;
transform: rotate(37.5deg);
-webkit-transform: rotate(37.5deg);
animation: ribbon8 2s;
-webkit-animation: ribbon8 2s;
z-index: 8;
}
#ribbon9 {
background-color: #C8312C;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
animation: ribbon9 2s;
-webkit-animation: ribbon9 2s;
z-index: 9;
}
#ribbon10 {
background-color: #338ED2;
transform: rotate(22.5deg);
-webkit-transform: rotate(22.5deg);
animation: ribbon10 2s;
-webkit-animation: ribbon10 2s;
z-index: 10;
}
#ribbon11 {
background-color: #F9E62E;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
animation: ribbon11 2s;
-webkit-animation: ribbon11 2s;
z-index: 11;
}
#ribbon12 {
background-color: #C92F2E;
transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
animation: ribbon12 2s;
-webkit-animation: ribbon12 2s;
z-index: 12;
}
#ribbon13 {
background-color: #338ED2;
animation: ribbon13 2s;
-webkit-animation: ribbon13 2s;
z-index: 13;
}
</style>
</head>
<body>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
<div id="ribbon3"></div>
<div id="ribbon4"></div>
<div id="ribbon5"></div>
<div id="ribbon6"></div>
<div id="ribbon7"></div>
<div id="ribbon8"></div>
<div id="ribbon9"></div>
<div id="ribbon10"></div>
<div id="ribbon11"></div>
<div id="ribbon12"></div>
<div id="ribbon13"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment