AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

霓虹灯数字时钟（可复制源代码）

2024-10-06 85
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文展示了如何创建一个具有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>



文章标签：
前端开发
JavaScript
容器
程序员皮皮林
目录
相关文章
疯狂的猿
|
18天前
好看的粒子特效代码
好看的粒子特效代码，鼠标可以拖住旋转或者放大，喜欢的话可以拿去使用
疯狂的猿
28 2
游客fz577umxdejsg
|
3月前
|
前端开发
一键复制，霓虹灯效果：CSS动画，为设计添彩！
一键复制，霓虹灯效果：CSS动画，为设计添彩！
游客fz577umxdejsg
37 1
游客fz577umxdejsg
|
3月前
|
前端开发
直接复制粘贴！纯CSS如何秒制作充电动画？立即试试！
直接复制粘贴！纯CSS如何秒制作充电动画？立即试试！
游客fz577umxdejsg
40 0
屿小夏
|
4月前
|
Python
Python模拟火焰文字效果：炫酷的火焰字动效
Python模拟火焰文字效果：炫酷的火焰字动效
屿小夏
66 1
极客李华
|
6月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
极客李华
59 0
小蚂蚁XMY
|
6月前
|
索引
在微信小游戏制作工具中实现文字逐个出现的打字机效果
在微信小游戏制作工具中实现文字逐个出现的打字机效果
小蚂蚁XMY
70 0
w风雨无阻w
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（2）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
137 0
w风雨无阻w
|
数据安全/隐私保护
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果（1）
CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
w风雨无阻w
133 0
雪碧有白泡泡
|
前端开发
前端代码分享——霓虹灯图标菜单特效（内含源码）
前端代码分享——霓虹灯图标菜单特效（内含源码）
雪碧有白泡泡
80 0
小康2022
|
Python 容器
tkinter模块高级操作（二）—— 界面切换效果、立体阴影字效果及gif动图的实现
tkinter模块高级操作（二）—— 界面切换效果、立体阴影字效果及gif动图的实现
小康2022
283 0