霓虹灯数字时钟（可复制源代码）
文章目录
- 一、效果演示
- 二、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&…...
亚马逊国际商品详情API返回值：电商精准营销的关键
亚马逊国际商品详情API（Amazon Product Advertising API）为开发者提供了一种获取商品信息的方式，这些信息对于电商精准营销至关重要。通过分析API返回的详细数据，商家可以制定更精准的营销策略，提高用户购买转化率。 …...
python爬虫 - 进阶requests模块
🌈个人主页：https://blog.csdn.net/2401_86688088?typeblog 🔥 系列专栏：https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、SSL证书问题 （一）跳过 SSL 证书验证 ࿰…...
代码随想录 103. 水流问题
103. 水流问题 #include<bits/stdc.h> using namespace std;void dfs(vector<vector<int>>& mp, vector<vector<int>>& visit, int y, int x){if (visit[y][x] 1) return;visit[y][x] 1;if (y > 0){if (mp[y][x] < mp[y - 1][x…...
数据结构-排序1
1.排序的概念 排序：所谓排序，就是使一串记录，按照其中的某个或某些关键字的大小，递增或递减的排列起来的操作。 稳定性：假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序…...
Springboot 整合 durid
文章目录 Springboot 整合 druiddruid的优势配置参数使用整合 Druid配置数据源配置参数绑定配置参数配置监控页面配置拦截器 Springboot 整合 druid druid的优势 可以很好的监控 DB 池连接 和 SQL 的执行情况可以给数据库密码加密可以很方便的编写JDBC插件 配置参数 使用 整…...
JVM 系列知识体系全面回顾
经过几个月的努力，JVM 知识体系终于梳理完成了。 很早之前也和小伙伴们分享过 JVM 相关的技术知识，再次感谢大家支持和反馈。 最后再次献上 JVM系列文章合集索引，感兴趣的小伙伴可以点击查看。 JVM系列(一) -什么是虚拟机JVM系列(二) -类的…...
crossover软件如何安装程序 及最新图文案张教程
IT之家 2 月 23 日消息，CodeWeavers 近日发布了 CrossOver 24 版本更新，基于近期发布的 Wine 9.0，不仅兼容更多应用和游戏，还初步支持运行 32 位应用程序。 苹果在 macOS Catalina 系统中移除对 32 位软件的支持之后，在…...
Python爬虫之正则表达式于xpath的使用教学及案例
正则表达式 常用的匹配模式 \d # 匹配任意一个数字 \D # 匹配任意一个非数字 \w # 匹配任意一个单词字符（数字、字母、下划线） \W # 匹配任意一个非单词字符 . # 匹配任意一个字符（除了换行符） [a-z] # 匹配任意一个小写字母 […...
Jenkins打包，发布，部署
一、概念 Jenkins是一个开源的持续集成工具，主要用于自动构建和测试软件项目，以及监控外部任务的运行。与版本管理工具（如SVN，GIT）和构建工具（如Maven，Ant，Gradle）结合使…...
CSS 实现楼梯与小球动画
CSS 实现楼梯与小球动画 效果展示 CSS 知识点 CSS动画使用transform属性使用 页面整体布局 <div class"window"><div class"stair"><span style"--i: 1"></span><span style"--i: 2"></span>…...