电子表效果css
时间: 2023-07-23 20:14:50 浏览: 62
要实现电子表的效果,可以使用CSS的animation属性和@keyframes规则。以下是一个简单的示例:
HTML代码:
```
<div class="clock">
<span class="hours"></span>
<span class="colon">:</span>
<span class="minutes"></span>
<span class="colon">:</span>
<span class="seconds"></span>
</div>
```
CSS代码:
```
.clock {
font-size: 3em;
font-family: monospace;
color: #0f0;
background-color: #000;
padding: 10px;
display: inline-block;
border-radius: 10px;
}
.colon {
animation: blink 1s infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.hours, .minutes, .seconds {
animation: flip 1s infinite;
}
@keyframes flip {
0% {
transform: rotateX(0);
z-index: 1;
}
50% {
transform: rotateX(90deg);
z-index: -1;
}
100% {
transform: rotateX(0);
z-index: 1;
}
}
.hours {
animation-delay: 0s;
}
.minutes {
animation-delay: 0.5s;
}
.seconds {
animation-delay: 1s;
}
```
这段代码会创建一个黑色背景、绿色数字的电子表,冒号会闪烁。数字会以一秒钟为周期翻转,实现电子表的效果。