create analog clock design using html+css
Certainly! Here's an example of an analog clock design using HTML and CSS:
```html
------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<style>
body {
background-color: #222222;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.clock {
width: 200px;
height: 200px;
border: 10px solid #FFFFFF;
border-radius: 50%;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.hour-hand,
.minute-hand,
.second-hand {
background-color: #FFFFFF;
position: absolute;
transform-origin: bottom center;
transition-timing-function: steps(1);
}
.hour-hand {
width: 8px;
height: 80px;
top: calc(50% - 80px);
left: calc(50% - 4px);
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.minute-hand {
width: 6px;
height: 100px;
top: calc(50% - 100px);
left: calc(50% - 3px);
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.second-hand {
width: 2px;
height: 110px;
top: calc(50% - 110px);
left: calc(50% - 1px);
background-color: red;
}
.clock-center {
width: 12px;
height: 12px;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 6px);
}
</style>
</head>
<body>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="clock-center"></div>
</div>
<script>
function updateClock() {
const now = new Date();
const hour = now.getHours() % 12;
const minute = now.getMinutes();
const second = now.getSeconds();
const hourRotation = (hour * 30) + (minute * 0.5);
const minuteRotation = (minute * 6) + (second * 0.1);
const secondRotation = second * 6;
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
hourHand.style.transform = `rotate(${hourRotation}deg)`;
minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
secondHand.style.transform = `rotate(${secondRotation}deg)`;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
```
In this example, we create a simple analog clock design using HTML and CSS. The clock consists of three hands: hour, minute, and second. The hands are positioned within a circular clock face.
The CSS styles define the appearance and position of the clock and its hands. The JavaScript code inside the `<script>` tag updates the rotation of the hands every second using the `setInterval()` function.
To use this code, save it as an HTML file (e.g., `analog-clock.html`). Open the HTML file in a web browser, and you'll see the analog clock ticking in real-time.
Feel free to customize the CSS styles and adjust the clock's dimensions and colors to match your desired design.
Comments
Post a Comment