Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >霓虹灯数字时钟(可复制源代码)

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

原创
作者头像
程序员皮皮林
发布于 2024-10-06 13:29:27
发布于 2024-10-06 13:29:27
18600
代码可运行
举报
文章被收录于专栏:前端前端
运行总次数:0
代码可运行

效果演示

文末可一键复制完整代码

Code

HTML
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 部分
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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;
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
::selection {
    background: #333;
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
::-moz-selection {
    background: #111;
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
*,
html {
    margin: 0;
}

重置默认的外边距。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
body {
    background: #333;
}

设置页面背景颜色。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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转换和过渡效果。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
figure:hover {
    -webkit-transform: rotateX(-50deg) rotateY(45deg);
    transform: rotateX(-50deg) rotateY(45deg);
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: center;
    transform-origin: center;
    background: #000;
    text-align: center;
}

定义时钟各个面的样式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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;
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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转换。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@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 部分
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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');

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

代码语言:txt
AI代码解释
复制
<!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>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
情人节程序员用HTML网页表白【浪漫的烟花3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/20
9350
情人节程序员用HTML网页表白【浪漫的烟花3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
1.抽屉式(动态)选择 button(纯css实现) html代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s
淼学派对
2022/11/20
1.6K0
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
每日分享html之3个logo、1个背景、1个button
动态效果,如缩放,覆盖,滑出网页或单个视觉元素,可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。
淼学派对
2022/11/20
5110
每日分享html之3个logo、1个背景、1个button
仅用 CSS 实现赛博朋克 2077 风格视觉效果
《赛博朋克2077》 是一款动作角色类游戏,于 2020年12月10日 登陆各大游戏平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野心勃勃的雇佣兵:V,追寻一种独一无二的植入体——获得永生的关键。它以自由的探索性,较高的操控度以及惊艳的视觉特效收获了一大批玩家。我非常喜欢 2077 官网的设计风格,因此本篇文章主要以 2077 官网为例,通过几个例子,依次实现赛博朋克风格元素效果。
zz_jesse
2021/07/30
6770
霓虹灯数字时钟(可复制源代码)
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3c0nu17s7yck8
半夜喝可乐
2024/09/30
1330
霓虹灯数字时钟(可复制源代码)
情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/20
5320
情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
CSS 3.0实现立体书本特效
给大家分享一个运用CSS 3.0实现的立体书本特效,效果如下: 还真是很像一本书吧,但是需要下面三张图片配合。 1.书的正面图(1.jpg),实际尺寸以代码中的为准。 2.书的侧面(2.jpg),实际
越陌度阡
2020/11/26
1.3K0
CSS 3.0实现立体书本特效
光标有反转效果的侧边导航(附源代码)
这是一个侧边导航效果,这个展开的效果给人一种很柔和的感觉,展开后菜单内容依次显示,最后是增加了一个聚焦的圆跟随光标移动,当遇到菜单内容时会放大圆形并反转显示菜单文字,加深了对导航的交互,这里的反转色基于 mix-blend-mode: difference 实现。这个效果还有两个主题色切换,有兴趣的可以在线看效果。
半夜喝可乐
2024/10/10
2450
光标有反转效果的侧边导航(附源代码)
CSS3 转换(Transform)
在CSS中,允许元素实现 2D 和 3D的转换效果,主要包含 :旋转,缩放,移动,倾斜        
py3study
2020/01/14
9240
转一个css3绘制的iPhone6
css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> @font-f
练小习
2017/12/29
5520
8个有用的 CSS 技巧:视差图像,sticky footer 等等
CSS是一种独特的语言。乍一看,这似乎很简单,但是,某些在理论上看起来很简单的效果在实践中往往不那么明显。
前端小智@大迁世界
2019/04/18
1.3K0
【前端攻略--HTML/CSS】这是你需要的transform学习教程
transition语法格式:transition: property duration timing-function delay;
野原测试开发
2019/07/10
1.1K0
css3动画从入门到精通
什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实
xiangzhihong
2018/02/05
2.5K0
css3动画从入门到精通
内外立方体旋转样式
样式效果: 为了方便,没有把css和html分开,代码如下,欢迎白嫖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>mytest</title> <meta name="author" content="洋__" /> <meta name="description" content="关注我一起学习" /> <s
砖业洋__
2023/05/06
3550
内外立方体旋转样式
CSS3
http://caniuse.com/ 1、私有前缀及其用法 .round{ -khtml-border-radius: 10px; / Konqueror / -rim-border-radius: 10px; / RIM / -ms-border-radius: 10px; / Microsoft / -o-border-radius: 10px; / Opera / -moz-border-radius: 10px; / Mozilla (如 Firefox) / -webkit-border-radius: 10px; / Webkit (如 Safari 和 Chrome) / border-radius: 10px; / W3C / }
py3study
2020/01/10
7440
驶入2023
马上进入2023年了,这一年我们经历了很多有酸甜苦辣,但是并不妨碍我们用崭新的自己来面对新的一年,偶然在网上看到一位大佬用css做了一辆喜庆的车车来让人们驶入2023
橘子君丶
2023/03/06
2820
菜鸡博客开……开……开源了!
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!
attack
2018/09/21
3K0
天哪!跟真的一样(CSS)
  无论是css还是别的,前端的学习总是妙趣横生,只要思想在不断进步,技术就会一次次的突破。如果你学习过CSS,你会更加了解这段代码的神奇,送给你,远道而来的求学者。   如果你不曾学习过CSS,又想将代码保存下来,留待将来学习和参悟,那么请点击 “ 这里 ” ,一遍就能学废。
我不是费圆
2020/09/21
9850
天哪!跟真的一样(CSS)
【一起来烧脑】一步学会CSS3体系
background-image属性添加背景图片 background-size指定背景图像的大小 background-origin属性指定了背景图像的位置区域
达达前端
2019/07/19
8080
【一起来烧脑】一步学会CSS3体系
CSS3旋转实例学习(附3D旋转实例)
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果。在CSS3中有个常见的transform应用,transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。本文主要侧重讲解CSS3的平面旋转(2D)方法和立体旋转(3D)方法。不过既然提起transform,还是先普及一下transform属性的基本知识:
RD.Timon
2020/10/26
3.7K0
CSS3旋转实例学习(附3D旋转实例)
推荐阅读
相关推荐
情人节程序员用HTML网页表白【浪漫的烟花3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档