用css生成一个时钟带刻度的
时间: 2024-09-25 09:13:29 浏览: 60
要使用CSS创建一个简单的时钟带刻度,我们可以利用CSS3的`transform`, `transition`, 和伪元素(`:before`和`:after`)。以下是一个基础示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.clock {
display: flex;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f8f8f8;
position: relative;
box-sizing: border-box;
overflow: hidden;
animation: clockRotate 1s infinite linear;
}
.hand {
position: absolute;
transition: transform 0.5s;
}
.hour-hand, .minute-hand, .second-hand {
width: 6px;
background-color: black;
stroke-width: 2px;
}
/* 刻度 */
.ticks {
position: absolute;
font-size: 0.7em;
line-height: 1.2em;
color: #ccc;
top: 50%;
left: 50%;
transform-origin: bottom center;
}
.ticks::before {
content: attr(data-time);
transform: translateX(-50%) translateY(-50%);
opacity: 0;
transition: all 0.5s ease-in-out;
}
@keyframes clockRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hour-hand {
width: 10px; /* 增加小时指针宽度 */
top: 50%; left: 50%;
transform-origin: bottom center;
transform: rotate(0deg);
}
.hour-hand[data-position] {
transform: rotate(calc((90 - (data-position % 12) * 30) * ((data-position < 12) ? 1 : -1)));
}
/* 钟表上的数字 */
.numbers {
position: absolute;
font-size: 1.2em;
color: #666;
text-align: center;
line-height: 1em;
padding-top: 5px;
pointer-events: none;
}
.numbers::before {
content: attr(data-time);
}
.numbers-hour {
top: 0%;
left: calc(50% + 15px);
transform: translateY(-50%);
}
.numbers-minute,
.numbers-second {
width: 100%;
left: 0%;
}
.numbers-minute {
top: 80%;
}
.numbers-second {
top: 95%;
}
</style>
</head>
<body>
<div class="clock" data-ticks="0,5,10,15,20,25,30,35,40,45,50,55,60">
<div class="hour-hand hour-hand-0"></div>
<div class="minute-0"></div>
<div class="ticks"></div>
<div class="numbers numbers-hour">12</div>
<div class="numbers numbers-minute">12</div>
<div class="numbers numbers-second">12</div>
</div>
<!-- 使用数据属性定义每个指针的位置 -->
<script>
const clock = document.querySelector('.clock');
const ticks = clock.dataset.ticks.split(',').map(position => parseInt(position));
function updateHands() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 更新时针、分针和秒针
for (let i = 0; i <= 11; i++) {
const handClass = `hour-hand hour-hand-${i}`;
if (hours === i) {
document.querySelector(handClass).classList.add('active');
} else {
document.querySelector(handClass).classList.remove('active');
}
const tickPosition = (i * 30) + ((minutes / 60) * 30);
document.querySelector(`.${handClass}`).setAttribute('data-position', tickPosition);
const tickDataTime = `${i * 5}分钟`;
const tickElement = document.querySelector(`.ticks[data-time="${tickDataTime}"]`);
tickElement.style.opacity = (Math.abs(tickPosition - (seconds * 0.5)) < 5) ? 1 : 0;
}
// 更新数字
const numbersHourElement = document.querySelector('.numbers-hour');
const numbersMinuteElement = document.querySelector('.numbers-minute');
const numbersSecondElement = document.querySelector('.numbers-second');
numbersHourElement.textContent = hours % 12 || 12;
numbersMinuteElement.textContent = minutes;
numbersSecondElement.textContent = seconds;
}
setInterval(updateHands, 1000);
</script>
</body>
</html>
```
这个例子中,我们创建了一个圆形的钟面,包含时针、分针和秒针。时钟会自动更新时间并显示刻度。刻度是通过伪元素 `.ticks::before` 实现的,它们在时间改变时根据秒数的平滑动画效果显示或隐藏。
阅读全文