Skip to content

Instantly share code, notes, and snippets.

@JasonCole1980

JasonCole1980/animated-gyroscope.css

Last active March 11, 2017 17:57
Show Gist options
  • Save JasonCole1980/11223415 to your computer and use it in GitHub Desktop.
Save JasonCole1980/11223415 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animated Gyroscope
Raw
animated-gyroscope.css
body {
background: url("http://assets.codepen.io/images/classy_fabric.png");
}
#sweet {
position: fixed;
margin: 0 45%;
top: 10em;
}
.intro {
background-color: #fff;
border: 2px dotted #f46;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
width: auto;
height: auto;
-webkit-animation: round 4.5s linear infinite;
animation: round 4.5s linear infinite;
transition: border-radius 0.3s linear;
}
.outro {
background-color: #1f1f24;
margin: 0px;
border: 5px solid #c16;
border-radius: 0px;
width: auto;
height: auto;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
-webkit-animation: rounddd 8s linear infinite;
animation: rounddd 8s linear infinite;
transition: border-radius 0.3s linear;
}
.intro:hover {
border-radius: 40%;
}
.outro:hover {
border-radius: 40%;
}
@-webkit-keyframes round {
0% {-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
100% {-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rounddd {
0% {-webkit-transform: rotate(0deg);;
transform: rotate(0deg);
}
100% {-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
Raw
animated-gyroscope.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Animated Gyroscope</title>
<link rel="stylesheet" href="animated-gyroscope.css">
</head>
<body>
<div id="sweet">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment