A 3D (looking) clock made with CSS gradients and borders. Demo and Download options available.
HTML Snippet
<div class="container">
<div class="rim"></div>
<div class="outer"></div>
<div class="inner">
</div>
<div id="clock"></div>
</div>Less Code
body {
background: #000;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rim {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 20px solid #000;
border-radius: 50%;
animation: shift-rim 8s infinite;
z-index: 10;
}
.outer {
width: 300px;
height: 300px;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(8,8,71,1) 100%);
border: 10px solid #1A23F2;
border-radius: 50%;
box-sizing: border-box;
filter: blur(2px);
animation: shift 8s infinite;
&::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 104%;
height: 104%;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
filter: blur(2px);
}
}
.inner {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: linear-gradient(to bottom, rgba(8,8,71,1) 0%, rgba(0,0,0,1) 100%);
border: 8px solid #1A23F2;
border-radius: 50%;
box-sizing: border-box;
box-shadow: 0 10px 20px 10px #000;
filter: blur(1px);
animation: shift-inner 8s infinite;
&::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 8px solid #000;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
filter: blur(5px);
}
&::after {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 105%;
height: 105%;
border: 1px solid #6AAEE9;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
filter: blur(3px);
}
}
#clock {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 50px;
color: #fff;
font-family: 'Baloo Tammudu', cursive;
font-size: 40px;
text-align: center;
text-shadow: 0 0 30px #8DCAED;
animation: shift-clock 8s infinite;
}
@keyframes shift {
0% {
height: 100px;
}
50% {
height: 280px;
}
100% {
height: 100px;
}
}
@keyframes shift-rim {
0% {
top: 40%;
height: 100px;
}
50% {
top: 50%;
height: 280px;
}
100% {
top: 40%;
height: 100px;
}
}
@keyframes shift-inner {
0% {
top: -10px;
height: 50px;
}
50% {
top: 40px;
height: 190px;
}
100% {
top: -10px;
height: 50px;
}
}
@keyframes shift-clock {
0% {
top: -10px;
transform: translateX(-50%) scaleY(.2);
}
50% {
top: 100px;
transform: translateX(-50%) scaleY(1);
}
100% {
top: -10px;
transform: translateX(-50%) scaleY(.2);
}
}View Compiled CSS
body {
background: #000;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rim {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 20px solid #000;
border-radius: 50%;
-webkit-animation: shift-rim 8s infinite;
animation: shift-rim 8s infinite;
z-index: 10;
}
.outer {
width: 300px;
height: 300px;
background: linear-gradient(to bottom, #000000 0%, #080847 100%);
border: 10px solid #1A23F2;
border-radius: 50%;
box-sizing: border-box;
-webkit-filter: blur(2px);
filter: blur(2px);
-webkit-animation: shift 8s infinite;
animation: shift 8s infinite;
}
.outer::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 104%;
height: 104%;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.inner {
position: absolute;
top: -10px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #080847 0%, #000000 100%);
border: 8px solid #1A23F2;
border-radius: 50%;
box-sizing: border-box;
box-shadow: 0 10px 20px 10px #000;
-webkit-filter: blur(1px);
filter: blur(1px);
-webkit-animation: shift-inner 8s infinite;
animation: shift-inner 8s infinite;
}
.inner::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 8px solid #000;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
-webkit-filter: blur(5px);
filter: blur(5px);
}
.inner::after {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 105%;
height: 105%;
border: 1px solid #6AAEE9;
box-sizing: border-box;
border-radius: 50%;
opacity: 1;
-webkit-filter: blur(3px);
filter: blur(3px);
}
#clock {
position: absolute;
top: -10px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 50px;
color: #fff;
font-family: 'Baloo Tammudu', cursive;
font-size: 40px;
text-align: center;
text-shadow: 0 0 30px #8DCAED;
-webkit-animation: shift-clock 8s infinite;
animation: shift-clock 8s infinite;
}
@-webkit-keyframes shift {
0% {
height: 100px;
}
50% {
height: 280px;
}
100% {
height: 100px;
}
}
@keyframes shift {
0% {
height: 100px;
}
50% {
height: 280px;
}
100% {
height: 100px;
}
}
@-webkit-keyframes shift-rim {
0% {
top: 40%;
height: 100px;
}
50% {
top: 50%;
height: 280px;
}
100% {
top: 40%;
height: 100px;
}
}
@keyframes shift-rim {
0% {
top: 40%;
height: 100px;
}
50% {
top: 50%;
height: 280px;
}
100% {
top: 40%;
height: 100px;
}
}
@-webkit-keyframes shift-inner {
0% {
top: -10px;
height: 50px;
}
50% {
top: 40px;
height: 190px;
}
100% {
top: -10px;
height: 50px;
}
}
@keyframes shift-inner {
0% {
top: -10px;
height: 50px;
}
50% {
top: 40px;
height: 190px;
}
100% {
top: -10px;
height: 50px;
}
}
@-webkit-keyframes shift-clock {
0% {
top: -10px;
-webkit-transform: translateX(-50%) scaleY(0.2);
transform: translateX(-50%) scaleY(0.2);
}
50% {
top: 100px;
-webkit-transform: translateX(-50%) scaleY(1);
transform: translateX(-50%) scaleY(1);
}
100% {
top: -10px;
-webkit-transform: translateX(-50%) scaleY(0.2);
transform: translateX(-50%) scaleY(0.2);
}
}
@keyframes shift-clock {
0% {
top: -10px;
-webkit-transform: translateX(-50%) scaleY(0.2);
transform: translateX(-50%) scaleY(0.2);
}
50% {
top: 100px;
-webkit-transform: translateX(-50%) scaleY(1);
transform: translateX(-50%) scaleY(1);
}
100% {
top: -10px;
-webkit-transform: translateX(-50%) scaleY(0.2);
transform: translateX(-50%) scaleY(0.2);
}
}JavaScript
(function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
m = checkTime(m);
document.getElementById('clock').innerHTML =
h + ":" + m;
var t = setTimeout(startTime, 500);
})();
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}Preview
Discussion about this post