CSS3实现实时时间数字滚动
以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS3实现实时时间数字滚动效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时间滚动效果</title>
<style>
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.time-container {
overflow: hidden;
white-space: nowrap;
background: #f2f2f2;
padding: 10px;
border-radius: 5px;
}
.time-display {
display: inline-block;
font-size: 3em;
animation: scroll 5s linear infinite;
}
</style>
</head>
<body onload="startClock()">
<div class="time-container">
<div id="time-element" class="time-display"></div>
</div>
<script>
function startClock() {
const timeElement = document.getElementById('time-element');
const updateTime = () => {
const now = new Date();
timeElement.textContent = now.toLocaleTimeString('it-IT');
};
updateTime(); // Initialize the time display
setInterval(updateTime, 1000); // Update the time every second
}
</script>
</body>
</html>这段代码实现了一个简单的数字时钟，其中时间数字通过CSS动画在屏幕上滚动。@keyframes scroll定义了数字从屏幕右侧进入到左侧的滚动动画。.time-display类使用这个动画，并且通过JavaScript每秒更新内容以显示当前时间。
评论已关闭