霓虹灯数字时钟(可复制源代码)

简介: 本文展示了如何创建一个具有3D效果的霓虹灯数字时钟。通过HTML、CSS和JavaScript实现了一个动态更新时间的时钟,其中包含了字体定义、3D变换、过渡效果以及颜色动画等关键部分。最后提供了完整的代码供读者复制使用。

效果演示

640.gif

文末可一键复制完整代码

Code

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯数字时钟</title>
    <link rel="stylesheet" href="./127-霓虹灯数字时钟.css">
</head>
<body>
    <figure>
        <div class="face top">
            <p id="s"></p>
        </div>
        <div class="face front">
            <p id="m"></p>
        </div>
        <div class="face left">
            <p id="h"></p>
        </div>
    </figure>
</body>
<script src="./127-霓虹灯数字时钟.js"></script>
</html>
CSS
@font-face {
    font-family: 'Digital-7';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
}
::selection {
    background: #333;
}
::-moz-selection {
    background: #111;
}
*,
html {
    margin: 0;
}
body {
    background: #333
}
figure {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-35deg) rotateY(45deg);
    transform: rotateX(-35deg) rotateY(45deg);
    transition: 2s;
}
figure:hover {
    -webkit-transform: rotateX(-50deg) rotateY(45deg);
    transform: rotateX(-50deg) rotateY(45deg);
}
.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: center;
    transform-origin: center;
    background: #000;
    text-align: center;
}
p {
    font-size: 180px;
    font-family: 'Digital-7';
    margin-top: 20px;
    color: #2982FF;
    text-shadow: 0px 0px 5px #000;
    -webkit-animation: color 10s infinite;
    animation: color 10s infinite;
    line-height: 180px;
}
.front {
    -webkit-transform: translate3d(0, 0, 105px);
    transform: translate3d(0, 0, 105px);
    background: #111;
}
.left {
    -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
    transform: rotateY(-90deg) translate3d(0, 0, 105px);
    background: #151515;
}
.top {
    -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
    transform: rotateX(90deg) translate3d(0, 0, 105px);
    background: #222;
}
@keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
@-webkit-keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
JavaScript
function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
                h = "0" + h;
        }
        m = date.getMinutes();
        if (m < 10) {
                m = "0" + m;
        }
        s = date.getSeconds();
        if (s < 10) {
                s = "0" + s;
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true;
}
window.onload = date_time('s');

实现思路拆分

CSS 部分
@font-face {
    font-family: 'Digital-7';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
    font-weight: normal;
    font-style: normal;
}

定义数字时钟使用的字体。

::selection {
    background: #333;
}

设置文本选中时的背景颜色。

::-moz-selection {
    background: #111;
}

设置Mozilla浏览器中文本选中时的背景颜色。

*,
html {
    margin: 0;
}

重置默认的外边距。

body {
    background: #333;
}

设置页面背景颜色。

figure {
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -105px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-35deg) rotateY(45deg);
    transform: rotateX(-35deg) rotateY(45deg);
    transition: 2s;
}

定义时钟容器的样式,包括尺寸、位置、3D转换和过渡效果。

figure:hover {
    -webkit-transform: rotateX(-50deg) rotateY(45deg);
    transform: rotateX(-50deg) rotateY(45deg);
}

定义时钟容器悬停时的样式。

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: center;
    transform-origin: center;
    background: #000;
    text-align: center;
}

定义时钟各个面的样式。

p {
    font-size: 180px;
    font-family: 'Digital-7';
    margin-top: 20px;
    color: #2982FF;
    text-shadow: 0px 0px 5px #000;
    -webkit-animation: color 10s infinite;
    animation: color 10s infinite;
    line-height: 180px;
}

定义时钟数字的样式,包括字体、颜色、阴影和动画。

.front {
    -webkit-transform: translate3d(0, 0, 105px);
    transform: translate3d(0, 0, 105px);
    background: #111;
}
.left {
    -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
    transform: rotateY(-90deg) translate3d(0, 0, 105px);
    background: #151515;
}
.top {
    -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
    transform: rotateX(90deg) translate3d(0, 0, 105px);
    background: #222;
}

定义时钟各个面的具体样式,包括背景颜色和3D转换。

@keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}
@-webkit-keyframes color {
    0% {
        color: #2982ff;
        text-shadow: 0px 0px 5px #000;
    }
    50% {
        color: #cc4343;
        text-shadow: 0px 0px 5px #ff0000;
    }
}

定义霓虹灯颜色变化动画的关键帧。

JavaScript 部分
function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
                h = "0" + h;
        }
        m = date.getMinutes();
        if (m < 10) {
                m = "0" + m;
        }
        s = date.getSeconds();
        if (s < 10) {
                s = "0" + s;
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true;
}
window.onload = date_time('s');

定义一个函数来获取当前时间并更新时钟的显示,设置页面加载完成时执行该函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯数字时钟</title>
    <style>
        @font-face {
            font-family: 'Digital-7';
            src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
            font-weight: normal;
            font-style: normal
        }

        ::selection {
            background: #333
        }

        ::-moz-selection {
            background: #111
        }

        *,
        html {
            margin: 0
        }

        body {
            background: #333
        }

        figure {
            width: 210px;
            height: 210px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -105px;
            margin-left: -105px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-35deg) rotateY(45deg);
            transform: rotateX(-35deg) rotateY(45deg);
            transition: 2s
        }

        figure:hover {
            -webkit-transform: rotateX(-50deg) rotateY(45deg);
            transform: rotateX(-50deg) rotateY(45deg)
        }

        .face {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-transform-origin: center;
            transform-origin: center;
            background: #000;
            text-align: center
        }

        p {
            font-size: 180px;
            font-family: 'Digital-7';
            margin-top: 20px;
            color: #2982FF;
            text-shadow: 0px 0px 5px #000;
            -webkit-animation: color 10s infinite;
            animation: color 10s infinite;
            line-height: 180px
        }

        .front {
            -webkit-transform: translate3d(0, 0, 105px);
            transform: translate3d(0, 0, 105px);
            background: #111
        }

        .left {
            -webkit-transform: rotateY(-90deg) translate3d(0, 0, 105px);
            transform: rotateY(-90deg) translate3d(0, 0, 105px);
            background: #151515
        }

        .top {
            -webkit-transform: rotateX(90deg) translate3d(0, 0, 105px);
            transform: rotateX(90deg) translate3d(0, 0, 105px);
            background: #222
        }

        @keyframes color {
            0% {
                color: #2982ff;
                text-shadow: 0px 0px 5px #000
            }

            50% {
                color: #cc4343;
                text-shadow: 0px 0px 5px #ff0000
            }
        }

        @-webkit-keyframes color {
            0% {
                color: #2982ff;
                text-shadow: 0px 0px 5px #000
            }

            50% {
                color: #cc4343;
                text-shadow: 0px 0px 5px #ff0000
            }
        }
    </style>
</head>

<body>
<figure>
    <div class="face top">
        <p id="s"></p>
    </div>
    <div class="face front">
        <p id="m"></p>
    </div>
    <div class="face left">
        <p id="h"></p>
    </div>
</figure>
</body>
<script>
    function date_time(id) {
        date = new Date;
        h = date.getHours();
        if (h < 10) {
            h = "0" + h
        }
        m = date.getMinutes();
        if (m < 10) {
            m = "0" + m
        }
        s = date.getSeconds();
        if (s < 10) {
            s = "0" + s
        }
        document.getElementById("s").innerHTML = '' + s;
        document.getElementById("m").innerHTML = '' + m;
        document.getElementById("h").innerHTML = '' + h;
        setTimeout('date_time("' + "s" + '");', '1000');
        return true
    }

    window.onload = date_time('s');
</script>

</html>



目录
打赏
0
11
13
1
103
分享
相关文章
爱心代码---html代码合集他来咯(1)
爱心代码---html代码合集他来咯
543 0
|
9月前
生日快乐(可复制源代码)
本文展示了生日快乐动画的效果,并提供了完整的源代码供一键复制。动画包含多个气球元素,采用渐变色设计,配合动态上升效果,营造出生动欢乐的氛围。
爱心代码---html代码合集他来咯(2)
爱心代码---html代码合集他来咯
630 0
2024年前端开发十大必备技巧
本文介绍了2024年前端开发的十大必备技巧,涵盖现代JavaScript、CSS Grid/Flexbox布局、主流框架(如React、Vue)、Web性能优化、Git版本控制、调试技巧、Web可访问性、现代构建工具(如Webpack)、PWA及持续学习等方面,帮助开发者保持竞争力并提升Web开发质量。
支撑每秒数百万订单无压力,SpringBoot + Disruptor 太猛了!
本文详细介绍如何通过 Spring Boot 集成 Disruptor 实现每秒处理数百万订单的高性能系统。Disruptor 是一种无锁并发框架,采用环形缓冲区和无锁算法,提供极低延迟和高吞吐量。文章涵盖 Maven 配置、事件工厂、处理器及生产者实现,并通过 REST API 和 Thymeleaf 展示订单创建流程。Disruptor 在高并发场景下表现出色,是解决高性能并发处理的理想方案。
|
9月前
经典面试题:用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)
在 C 语言中,使用 `#define` 预处理指令可以为常量命名,提高代码可读性和易维护性。通过基本时间单位换算(1 年 = 365 天 × 24 小时 × 60 分钟 × 60 秒),可以计算出一年中的总秒数,并将其定义为 `SECONDS_IN_A_YEAR`。示例代码展示了如何定义和打印这一常量,最终输出一年中有 31536000 秒。
276 15
Tengine、Nginx安装MySQL数据库命令教程
本指南详细介绍了在Linux系统上安装与配置MySQL数据库的步骤。首先通过下载并安装MySQL社区版本,接着启动MySQL服务,使用`systemctl start mysqld.service`命令。若启动失败,可尝试使用`sudo /etc/init.d/mysqld start`。利用`systemctl status mysqld.service`检查MySQL的服务状态,确保其处于运行中。通过日志文件获取初始密码,使用该密码登录数据库,并按要求更改初始密码以增强安全性。随后创建一个名为`tengine`的数据库,最后验证数据库创建是否成功以及完成整个设置流程。
关于 Python 3.13 你所需要知道的几点
关于 Python 3.13 你所需要知道的几点
193 14
关于 Python 3.13 你所需要知道的几点
Python 高级绘图:探索数据可视化
在Python中,利用matplotlib、seaborn等库可实现数据的可视化。matplotlib功能丰富,支持基础图表绘制;seaborn则提供了更美观的默认样式。此外,matplotlib还支持3D图形及动态图表的生成,满足多样化的数据展示需求。 示例代码展示了如何使用这些库绘制正弦波、散点图、3D曲面图及动态更新的折线图。通过numpy生成数据,并借助matplotlib与seaborn的强大绘图功能,实现数据的直观呈现。
142 17
|
9月前
|
Java Object 类详解
在 Java 中,`Object` 类是所有类的根类,每个 Java 类都直接或间接继承自 `Object`。作为所有类的超类,`Object` 定义了若干基本方法,如 `equals`、`hashCode`、`toString` 等,这些方法在所有对象中均可使用。通过重写这些方法,可以实现基于内容的比较、生成有意义的字符串表示以及确保哈希码的一致性。此外,`Object` 还提供了 `clone`、`getClass`、`notify`、`notifyAll` 和 `wait` 等方法,支持对象克隆、反射机制及线程同步。理解和重写这些方法有助于提升 Java 代码的可读性和可维护性。
323 20
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等