Live CSS Clock

Developer
Colt Borg
Size
3,364 Kb
Views
36,432
  1. Live CSS Clock Previews
  2. Live CSS Clock HTML Codes
  3. Live CSS Clock CSS Codes
  4. Live CSS Clock JS Codes

How do I make an live css clock?

What is a live css clock? How do you make a live css clock? This script and codes were developed by Colt Borg on 21 November 2022, Monday.

Live CSS Clock Previews
IQ Test

Live CSS Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live CSS Clock</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="outer-face"> <div class="marker oneseven"></div> <div class="marker twoeight"></div> <div class="marker fourten"></div> <div class="marker fiveeleven"></div> <div class="inner-face"> <div class="hand hour"></div> <div class="hand minute"></div> <div class="hand second"></div> </div> </div> <div class="link"><a href="http://www.javascriptkit.com/dhtmltutors/css3clock.shtml" target="_blank"> <JavaScript>Kit Live CSS Clock Tutorial</JavaScript></a></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Live CSS Clock - Script Codes CSS Codes

body { background-color: aquamarine;
}
.container { margin: 1% auto; width: 15.625rem; height: 15.625rem; box-sizing: border-box;
}
.link { text-align: center; margin: 1em 0;
}
a { color: #333; text-decoration: none; font-family: 'Helvetica', sans-serif; font-size: 1.3em; line-height: 1.4; border-bottom: 2px solid transparent;
}
a:hover { color: red; border-bottom-color: red; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.outer-face { position: relative; width: 100%; height: 100%; border-radius: 50%; background: #f6f6f6; box-shadow: inset 0 0 10px gray; border: 14px solid black
}
.outer-face::before,
.outer-face::after,
.outer-face .marker { /* All Hour Markers */ content: ""; position: absolute; width: 10px; height: 100%; background: black; z-index: 0; left: 50%; margin-left: -5px; top: 0
}
.outer-face::after { /* 9-3 time marker specifically*/ -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg)
}
.outer-face .marker { background: gray; width: 8px; margin-left: -4px
}
.outer-face .marker.oneseven { -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg)
}
.outer-face .marker.twoeight { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg)
}
.outer-face .marker.fourten { -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg)
}
.outer-face .marker.fiveeleven { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg)
}
.inner-face { position: relative; width: 88%; height: 88%; background: #f6f6f6; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1000; left: 6%; /* center DIV horizontally (100%-88% / 2) */ top: 6% /* center DIV vertically (100%-88% / 2) */
}
.inner-face::before { /* clock center dot small */ content: ""; width: 18px; height: 18px; border-radius: 100%; margin-left: -9px; margin-top: -9px; background: black; position: absolute; top: 50%; left: 50%; box-shadow: 0 0 30px gray;
}
.inner-face::after { content: "QUARTZ"; position: absolute; z-index: -2; width: 100%; font: normal 0.8em Arial; color: gray; text-align: center; top: 85%
}
.hand, .hand.hour { position: absolute; width: 4px; /* default width of hands/ hour hand */ height: 30%; /* default height of hands/ hour hand */ top: 20%; /* offset hand vertically by 20% so its bottom is at center of clock */ left: 50%; /* offset hand horiz by 50% so its left is at center of clock */ margin-left: -2px; /* Account for hand width to center hand horizonally */ background: black; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform-origin: bottom; /* Set transform origin to center bottom */ -ms-transform-origin: bottom; -webkit-transform-origin: bottom; transform-origin: bottom; z-index: -1; -moz-box-shadow: 0 0 3px gray; -webkit-box-shadow: 0 0 3px gray; box-shadow: 0 0 3px gray
}
.hand.minute { /* minute hand (2nd longest) */ height: 45%; top: 5%; width: 6px; margin-left: -3px;
}
.hand.second { /* second hand (longest) */ height: 50%; width: 2px; margin-left: -1px; top: 0; background: red;
}

Live CSS Clock - Script Codes JS Codes

var $hands = $('div.hand');
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){return setTimeout(f, 1000/60)};
function updateclock() { var curdate = new Date(); var hour_as_degree = ( curdate.getHours() + curdate.getMinutes() / 60 ) / 12 * 360; var minute_as_degree = curdate.getMinutes() / 60 * 360; var second_as_degree = ( curdate.getSeconds() + curdate.getMilliseconds() / 1000 ) / 60 * 360; $hands.filter('.hour').css({transform: 'rotate(' + hour_as_degree + 'deg)' }); $hands.filter('.minute').css({transform: 'rotate(' + minute_as_degree + 'deg)' }); $hands.filter('.second').css({transform: 'rotate(' + second_as_degree + 'deg)' }); requestAnimationFrame(updateclock);
}
requestAnimationFrame(updateclock);
Live CSS Clock - Script Codes
Live CSS Clock - Script Codes
Home Page Home
Developer Colt Borg
Username legendofcolt
Uploaded November 21, 2022
Rating 3
Size 3,364 Kb
Views 36,432
Do you need developer help for Live CSS Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Colt Borg (legendofcolt) Script Codes
Name
Login Interface from Sketch
Animated Text Gradient
CSS Compare - Tachyons
Smarter Underline Link
Bootstrap Layout Help
Quote Footer
Atomic class CSS Practice - Pricing Table
A Pen by Colt Borg
Gitlab Style Profile Cards
Triangle Image Gallery
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!