Clock Concept
How do I make an clock concept?
Based on this photo of a clock: https://twitter.com/benjancewicz/status/505938878470311936. What is a clock concept? How do you make a clock concept? This script and codes were developed by Keith Wyland on 19 December 2022, Monday.
Clock Concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clock Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html { background: linear-gradient(to bottom, #ff9cce, #b3e0f2);
}
.clock, .minutes,
.hours { width: 300px; height: 300px;
}
.wrap { display: flex; justify-content: center; align-items: center; height: 100vh;
}
.clock { background: white; position: relative; outline: 2px solid #555; box-shadow: inset 0 0 1em #666;
}
.clock:after { position: absolute; content: ''; width: 18px; height: 18px; top: calc(50% - 9px); left: calc(50% - 9px); background: #555; border-radius: 50%;
}
/* .seconds, */
.minutes,
.hours { position: absolute; border-style: solid; border-color: transparent #555 #555; border-width: 2px;
}
.minutes:before, .minutes:after,
.hours:before,
.hours:after { position: absolute; content: '';
}
.minutes:before,
.hours:before { top: -2px; left: calc(50% - 10px - 2px); width: 20px; height: 53.5%; border-style: solid; border-color: transparent #555 #555; border-width: 2px; border-radius: 0 0 20px 20px;
}
.minutes:after,
.hours:after { height: 2px; width: calc(100% + 4px); left: -2px; top: -2px; background: linear-gradient(to right, #555 139px, transparent 140px, transparent 160px, #555 161px, #555 300px);
}
.minutes:before { width: 10px; left: calc(50% - 7px); height: 52%;
}
.minutes:after { background: linear-gradient(to right, #555 144px, transparent 145px, transparent 156px, #555 157px, #555 300px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Based on this photo of a clock: https://twitter.com/benjancewicz/status/505938878470311936 -->
<div class="wrap"> <div class="clock"> <!-- <div class="seconds"></div> --> <div class="minutes"></div> <div class="hours"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Clock Concept - Script Codes CSS Codes
* { box-sizing: border-box;
}
html { background: linear-gradient(to bottom, #ff9cce, #b3e0f2);
}
.clock, .minutes,
.hours { width: 300px; height: 300px;
}
.wrap { display: flex; justify-content: center; align-items: center; height: 100vh;
}
.clock { background: white; position: relative; outline: 2px solid #555; box-shadow: inset 0 0 1em #666;
}
.clock:after { position: absolute; content: ''; width: 18px; height: 18px; top: calc(50% - 9px); left: calc(50% - 9px); background: #555; border-radius: 50%;
}
/* .seconds, */
.minutes,
.hours { position: absolute; border-style: solid; border-color: transparent #555 #555; border-width: 2px;
}
.minutes:before, .minutes:after,
.hours:before,
.hours:after { position: absolute; content: '';
}
.minutes:before,
.hours:before { top: -2px; left: calc(50% - 10px - 2px); width: 20px; height: 53.5%; border-style: solid; border-color: transparent #555 #555; border-width: 2px; border-radius: 0 0 20px 20px;
}
.minutes:after,
.hours:after { height: 2px; width: calc(100% + 4px); left: -2px; top: -2px; background: linear-gradient(to right, #555 139px, transparent 140px, transparent 160px, #555 161px, #555 300px);
}
.minutes:before { width: 10px; left: calc(50% - 7px); height: 52%;
}
.minutes:after { background: linear-gradient(to right, #555 144px, transparent 145px, transparent 156px, #555 157px, #555 300px);
}
Clock Concept - Script Codes JS Codes
function getTimeRotations() { var t = new Date(), h = t.getHours() % 12 / 12 * 360, m = t.getMinutes() * 6, s = t.getSeconds() * 6; /* document.querySelector('.seconds').style.transform = 'rotate(' + s + 'deg)'; */ document.querySelector('.minutes').style.transform = 'rotate(' + m + 'deg)'; document.querySelector('.hours').style.transform = 'rotate(' + h + 'deg)';
}
function clock() { getTimeRotations(); setTimeout(clock, 1000);
}
clock();
Developer | Keith Wyland |
Username | keithwyland |
Uploaded | December 19, 2022 |
Rating | 4 |
Size | 3,693 Kb |
Views | 8,096 |
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!
Name | Size |
SO example | 2,195 Kb |
Downward spiral | 2,105 Kb |
Eagle Tooth | 2,934 Kb |
Signal | 2,125 Kb |
CSS Timer | 3,208 Kb |
Check ... to CodePen | 3,286 Kb |
CSS Drawers | 67,859 Kb |
CSS Fan Blades or Flower | 1,934 Kb |
Testing a Sass Mixin | 2,291 Kb |
Learning Flexbox via flexbox.io | 2,342 Kb |
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!
Name | Username | Size |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
React Template | Isac | 1,241 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Cake | Kennyname | 7,220 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!