霓虹灯数字时钟（可复制源代码）
文章目录
- 一、效果演示
- 二、Code
- HTML
- CSS
- JavaScript
- 三、实现思路拆分
- CSS 部分
- JavaScript 部分
- 四、源代码
一、效果演示
文末可一键复制完整代码
二、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>
相关文章：
霓虹灯数字时钟（可复制源代码）
文章目录 一、效果演示二、CodeHTMLCSSJavaScript 三、实现思路拆分CSS 部分JavaScript 部分 四、源代码 一、效果演示 文末可一键复制完整代码 二、Code HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…...
大模型微调技术之 LoRA：开启高效微调新时代
一、LoRA 简介 LoRA，即低秩适应（Low-Rank Adaptation），是一种用于微调大型语言模型的技术，旨在以较小的计算资源和数据量实现模型的快速适应特定任务或领域。 LoRA 方法通过引入低秩近似的思想，对大型预训…...
【Vue】Vue2（2）
文章目录 1 数据代理1.1 回顾Object.defineproperty方法1.2 何为数据代理1.3 Vue中的数据代理 2 事件处理2.1 事件的基本使用2.2 事件修饰符2.3 键盘事件 1 数据代理 1.1 回顾Object.defineproperty方法 <!DOCTYPE html> <html><head><meta charset&quo…...
如何实现一个基于 HTML+CSS+JS 的任务进度条
如何实现一个基于 HTMLCSSJS 的任务进度条 在网页开发中，任务进度条是一种常见的 UI 组件，它可以直观地展示任务的完成情况。本文将向你展示如何使用 HTML CSS JavaScript 来创建一个简单的、交互式的任务进度条。用户可以通过点击进度条的任意位置来…...
学会流体力学，冬天洗澡再也不冷啦
前些日子收到一位网友“究极理性怪物”的私信，说最近在学校的公共浴室洗澡时，快被冻死了，希望我从流体力学角度帮他分析一下浴室的温度分布，以便找到相对温暖的洗澡位置。 我看到后觉得很有意思，就与他展开了关于澡堂…...
WPF下使用FreeRedis操作RedisStream实现简单的消息队列
Redis Stream简介 Redis Stream是随着5.0版本发布的一种新的Redis数据类型： 高效消费者组：允许多个消费者组从同一数据流的不同部分消费数据，每个消费者组都能独立地处理消息，这样可以并行处理和提高效率。 阻塞操作：消费者可以设置阻塞操作，这样它们会在流中有新数据…...
踩坑NVTX
最开始在 【简说】NVTX Nsight Nvidia性能分析利器 看到NVTX的时候，我觉得这是一个好东西啊，可以详细说明每一段时间对应的是哪一段程序。 看了一下github，他的文章已经过时，现在已经不需要链接动态库了，直接includ…...
Ubuntu修改IP方法
方法一：通过图形化界面修改IP 打开网络设置： 点击桌面右上角的网络图标，然后选择“设置”或“网络设置”。 选择网络接口： 在网络设置窗口中，选择你正在使用的网络接口（有线或无线网络）。 进…...
C++——STL简介
目录 一、什么是STL 二、STL的版本 三、STL的六大组件 没用的话..... 不知不觉两个月没写博客了，暑假后期因为学校的事情在忙，开学又在准备学校的java免修，再然后才继续开始学C，然后最近打算继续写博客沉淀一下最近学到的几周…...
[linux] 磁盘清理相关
在 CentOS 7 中清理磁盘空间可以通过多种方法实现，以下是一些常用的步骤和命令： 1. 查找和删除大文件 你可以使用 find 命令查找占用大量空间的文件： find / -type f -size 100M 2>/dev/null这条命令会查找大于 100 MB 的文件。你可以根…...
【笔记】DDD领域驱动设计
同名读书笔记，对于一些自觉重要的点进行记录。 扩展资源：github.com/evancyz/ddd-learning UML中类图的一些基本知识 - jack_Meng - 博客园 最后的第四部分暂时没看 Part Two 模型驱动设计的构造块 Chapter 5 软件中所表示的模型 5.2 模式：…...
用AI构建小程序需要多久？效果如何？
随着移动互联网的快速发展，多端应用的需求日益增长。为了提高开发效率、降低成本并保证用户体验的一致性，前端跨端技术在如今的开发界使用已经非常普遍了，技术界较为常用的跨端技术有小程序技术、HTML5技术两大类。 2023年以来，伴…...
深度学习的应用综述
文章目录 引言深度学习的基本概念深度学习的主要应用领域计算机视觉自然语言处理语音识别强化学习医疗保健金融分析 深度学习应用案例公式1.损失函数(Loss Function) 结论 引言 深度学习是机器学习的一个子领域，通过模拟人脑的神经元结构来处理复杂的数据。近年来&…...
whereis命令：查找命令的路径
一、命令简介 whereis 命令用于查找命令的：可执行文件、帮助文件和源代码文件。 例如 $ whereis ls ls: /usr/bin/ls /usr/share/man/man1/ls.1.gz找到了 ls 命令的可执行文件、帮助文件的位置。 二、命令参数 命令格式 whereis [选项] [命令名称]选项…...
【ECMAScript 从入门到进阶教程】第四部分：项目实践（项目结构与管理，单元测试，最佳实践与开发规范，附录）
第四部分：项目实践 第十四章 项目结构与管理 在构建现代 Web 应用程序时，良好的项目结构和管理是确保代码可维护性、高效开发和部署成功的关键因素。这一章将深入讨论项目初始化与配置，以及如何使用构建工具来简化和优化项目建设过程。 14…...
算法讲解—最小生成树（Kruskal 算法）
算法讲解—最小生成树（Kruskal 算法） 简介 根据度娘的解释我们可以知道，最小生成树(Minimum Spanning Tree, MST)就是：一个有 n n n 个结点的连通图的生成树是原图的极小连通子图，且包含原图中的所有 n n n 个结点…...
掌握 C# 多线程与异步编程
现代应用程序通常需要执行复杂的计算或处理 I/O 操作，这些操作可能会导致主线程阻塞，从而降低用户体验。C# 提供了多线程与异步编程的多种工具，让我们能够高效地并发处理任务。本文将介绍 C# 中的多线程与异步编程，包括 Thread 类…...
Angular 2 用户输入
Angular 2 用户输入 Angular 2 是一个由 Google 维护的开源前端 web 框架，用于构建单页应用程序（SPA）。它以其高效的双向数据绑定、模块化架构和强大的依赖注入系统而闻名。在 Angular 2 应用程序中，处理用户输入是核心功能之一，因为它允许应用程序响应用户的操作。 Ang…...
线程安全的单例模式 | 可重入 | 线程安全 |死锁（理论）
🌈个人主页： 南桥几晴秋 🌈C专栏： 南桥谈C 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据…...
解决方案：梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees）有什么区别
文章目录 一、现象二、解决方案梯度提升树（GBT）GBDT相同点区别 一、现象 在工作中，在机器学习中，时而会听到梯度提升树（Gradient Boosting Trees）跟GBDT（Gradient Boosting Decision Trees&…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
ffmpeg（四）：滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...
GitFlow 工作模式（详解）
今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...
相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系，可直观判断线性相关、非线性相关或无相关关系，点的分布密…...
Java并发编程实战 Day 11：并发设计模式
【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天，今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案，它们不仅提供了优雅的设计思路，还能显著提升系统的性能…...
李沐--动手学深度学习--GRU
1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...