Skip to content

Instantly share code, notes, and snippets.

@guioconnor

guioconnor/index.html

Forked from anonymous/index.html
Created January 19, 2016 01:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guioconnor/4745d4995f3086c4ac6d to your computer and use it in GitHub Desktop.
Save guioconnor/4745d4995f3086c4ac6d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/defuku
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.clock {
border: 2px solid black;
border-radius: 50%;
width: 16px;
height: 16px;
position: relative;
box-sizing: border-box;
background: #ccc;
float: left;
}
.clock2 {
border: 10px solid black;
width: 160px;
height: 160px;
}
.clock:hover {
border-color: red;
}
.clock:hover:before,
.clock:hover:after{
background: red;
}
.clock:before
,
.clock:after
{
top: 45%;
left: 50%;
content: "";
display: block;
width: 10%;
margin-left: -5%;
background: black;
position: absolute;
border-radius: 500px 500px 500px 500px;
}
.clock:before {
height: 50%;
animation-duration: 4s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 10%;
animation-timing-function: linear;
}
.clock:after {
height: 40%;
animation-duration: 8s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 12.5%;
animation-timing-function: linear;
}
@keyframes clock {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="clock"></div>
<div class="clock clock2"></div>
<script id="jsbin-source-css" type="text/css">.clock {
border: 2px solid black;
border-radius: 50%;
width: 16px;
height: 16px;
position: relative;
box-sizing: border-box;
background: #ccc;
float: left;
}
.clock2 {
border: 10px solid black;
width: 160px;
height: 160px;
}
.clock:hover {
border-color: red;
}
.clock:hover:before,
.clock:hover:after{
background: red;
}
.clock:before
,
.clock:after
{
top: 45%;
left: 50%;
content: "";
display: block;
width: 10%;
margin-left: -5%;
background: black;
position: absolute;
border-radius: 500px 500px 500px 500px;
}
.clock:before {
height: 50%;
animation-duration: 4s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 10%;
animation-timing-function: linear;
}
.clock:after {
height: 40%;
animation-duration: 8s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 12.5%;
animation-timing-function: linear;
}
@keyframes clock {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}</script>
</body>
</html>
Raw
jsbin.defuku.css
.clock {
border: 2px solid black;
border-radius: 50%;
width: 16px;
height: 16px;
position: relative;
box-sizing: border-box;
background: #ccc;
float: left;
}
.clock2 {
border: 10px solid black;
width: 160px;
height: 160px;
}
.clock:hover {
border-color: red;
}
.clock:hover:before,
.clock:hover:after{
background: red;
}
.clock:before
,
.clock:after
{
top: 45%;
left: 50%;
content: "";
display: block;
width: 10%;
margin-left: -5%;
background: black;
position: absolute;
border-radius: 500px 500px 500px 500px;
}
.clock:before {
height: 50%;
animation-duration: 4s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 10%;
animation-timing-function: linear;
}
.clock:after {
height: 40%;
animation-duration: 8s;
animation-name: clock;
animation-iteration-count: infinite;
transform-origin: 50% 12.5%;
animation-timing-function: linear;
}
@keyframes clock {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment