==== Pure CSS Clock ====
check it out!
@-webkit-keyframes needle1 { | |
from { | |
-webkit-transform: rotate(0deg) translate(-50px); } | |
to { | |
-webkit-transform: rotate(360deg) translate(-50px); } } | |
@-webkit-keyframes needle2 { | |
from { | |
-webkit-transform: rotate(0deg) translate(-70px); } | |
to { | |
-webkit-transform: rotate(360deg) translate(-70px); } } | |
@-webkit-keyframes needle3 { | |
from { | |
-webkit-transform: rotate(0deg) translate(-100px); } | |
to { | |
-webkit-transform: rotate(360deg) translate(-100px); } } | |
body { | |
background: white; } | |
.circle { | |
position: absolute; | |
top: 150px; | |
left: 200px; | |
width: 300px; | |
height: 300px; | |
border: 1px solid black; | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | |
border-radius: 150px; } | |
.needle1, .needle2, .needle3 { | |
position: absolute; | |
top: 300px; | |
left: 300px; | |
width: 100px; | |
height: 1px; | |
border-top: 3px solid blue; | |
-webkit-animation: needle1 3600s linear infinite; } | |
.needle2 { | |
left: 275px; | |
width: 150px; | |
border-top: 1px solid red; | |
-webkit-animation: needle2 60s linear infinite; } | |
.needle3 { | |
left: 250px; | |
width: 200px; | |
border-top: 1px dashed black; | |
-webkit-animation: needle2 1s linear infinite; } |
<!DOCTYPE html><html><head><meta charset="utf8"><link rel="stylesheet" type="text/css" href="index.css"><!--<script type="text/javascript" src="/js/jquery.1.8.2.js"></script><script type="text/javascript" src="/js/d3.v3.min.js"></script>--><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><script type="text/javascript" src="index.js"></script></head><body><div class="needle1"></div><div class="needle2"></div><div class="needle3"></div><div class="circle"></div></body></html> |
!!!5 | |
html | |
head | |
meta(charset="utf8") | |
link(rel="stylesheet",type="text/css",href="index.css") | |
// | |
script(type="text/javascript",src="/js/jquery.1.8.2.js") | |
script(type="text/javascript",src="/js/d3.v3.min.js") | |
script(type="text/javascript",src="http://code.jquery.com/jquery-1.10.2.min.js") | |
script(type="text/javascript",src="http://d3js.org/d3.v3.min.js") | |
script(type="text/javascript",src="index.js") | |
body | |
.needle1 | |
.needle2 | |
.needle3 | |
.circle |
@-webkit-keyframes needle1 | |
from | |
-webkit-transform: rotate(0deg) translate(-50px) | |
to | |
-webkit-transform: rotate(360deg) translate(-50px) | |
@-webkit-keyframes needle2 | |
from | |
-webkit-transform: rotate(0deg) translate(-70px) | |
to | |
-webkit-transform: rotate(360deg) translate(-70px) | |
@-webkit-keyframes needle3 | |
from | |
-webkit-transform: rotate(0deg) translate(-100px) | |
to | |
-webkit-transform: rotate(360deg) translate(-100px) | |
body | |
background: white | |
.circle | |
position: absolute | |
top: 150px | |
left: 200px | |
width: 300px | |
height: 300px | |
border: 1px solid #000 | |
box-shadow: 0 0 10px rgba(0,0,0,0.3) | |
border-radius: 150px | |
.needle1, .needle2, .needle3 | |
position: absolute | |
top: 300px | |
left: 300px | |
width: 100px | |
height: 1px | |
border-top: 3px solid #00f | |
-webkit-animation: needle1 3600s linear infinite | |
.needle2 | |
left: 275px | |
width: 150px | |
border-top: 1px solid #f00 | |
-webkit-animation: needle2 60s linear infinite | |
.needle3 | |
left: 250px | |
width: 200px | |
border-top: 1px dashed #000 | |
-webkit-animation: needle2 1s linear infinite |
all: | |
jade index.jade | |
livescript -cb index.ls | |
sass index.sass index.css |