好的,我会设计一个具有科幻感和创新感的表盘。以下是代码示例:
HTML:
```html
```
CSS:
```css
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #000;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
position: relative;
overflow: hidden;
}
.hour-hand,
.minute-hand,
.second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
background-color: #fff;
}
.hour-hand {
width: 10px;
height: 60px;
margin-left: -5px;
z-index: 3;
}
.minute-hand {
width: 8px;
height: 80px;
margin-left: -4px;
z-index: 2;
}
.second-hand {
width: 6px;
height: 100px;
margin-left: -3px;
z-index: 1;
}
.center-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
z-index: 4;
}
.outer-circle {
width: 240px;
height: 240px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -120px;
z-index: 0;
}
.inner-circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid #fff;
position: