当前位置： 首页 > news >正文

用HTML5+CSS+JavaScript实现新奇挂钟动画

news 来源：原创 2025/9/14 5:07:16

用HTML5+CSS+JavaScript实现新奇挂钟动画

引言

在技术博客中，如何吸引粉丝并保持他们的关注？除了干货内容，独特的视觉效果也是关键。今天，我们将通过HTML5、CSS和JavaScript实现一个新奇挂钟动画，并将其嵌入到你的网站中。这个动画不仅能让你的网站脱颖而出，还能展示你的前端开发实力。本文将提供详细的实现思路和代码模板，帮助你快速上手。

目录

  1. 项目介绍
  2. 技术栈
  3. 实现步骤
    • 3.1 环境准备
    • 3.2 挂钟结构设计（HTML）
    • 3.3 挂钟样式设计（CSS）
    • 3.4 动态效果实现（JavaScript）
  4. 优化与扩展
  5. 总结

1. 项目介绍

我们将使用HTML5、CSS和JavaScript来实现一个动态挂钟动画。这个挂钟不仅会显示当前时间，还会通过动画效果展示时针、分针和秒针的实时移动。最终效果可以直接嵌入到网站博客中，吸引更多粉丝关注。

2. 技术栈

  • HTML5：用于构建挂钟的基本结构。
  • CSS：用于设计挂钟的外观和动画效果。
  • JavaScript：用于实现动态时间更新和指针移动。

3. 实现步骤

3.1 环境准备

确保你有一个文本编辑器（如VSCode）和一个现代浏览器（如Chrome）来测试代码。

3.2 挂钟结构设计部分代码（index.html）
<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>新奇挂钟动画</title><link rel="stylesheet" href="./style.css"></head>
<body>
<!-- partial:index.partial.html -->
<head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
</head><body><div class="container"><div class="clock"><div class="bubble-wrap"><div class="bubbles-bg"><span style="--i:15;"></span><span style="--i:12;"></span><span style=

相关文章：

用HTML5+CSS+JavaScript实现新奇挂钟动画

用HTML5+CSS+JavaScript实现新奇挂钟动画 引言 在技术博客中，如何吸引粉丝并保持他们的关注？除了干货内容，独特的视觉效果也是关键。今天，我们将通过HTML5、CSS和JavaScript实现一个新奇挂钟动画，并将其嵌入到你的网站中。这个动画不仅能让你的网站脱颖而出，还能展示你的…...

编程日记 2025/9/14 5:07:16

【MySQL篇】表的操作

1&#xff0c;创建表 语法&#xff1a; create table ( field1 datatype, field2 datatype, field3 datatype )charset 字符集 collate 校验规则 engine 存储引擎; 说明&#xff1a; field表示列名datatype表示列的类型charset字符集&#xff0c;如果没有指明&#xff0c;则…...

编程日记 2025/9/14 5:02:13

CCF-CSP历年真题大全附题解python

2023012的真题 202312-1 仓库规划 5415. 仓库规划 - AcWing题库高质量的算法题库https://www.acwing.com/problem/content/5418/ 解题思路&#xff1a; 其实就是对比&#xff08;x.y,z.....&#xff09;需要找到一个每个元素都大于这个坐标得坐标&#xff0c;本题可以直接…...

编程日记 2025/9/13 10:20:08

Mysql——约束与多表查询

一、约束 1.1定义 约束是对表中的数据进行限制的一套规则&#xff0c;用于防止用户向数据库中输入无效数据。它可以保证表中的数据满足特定业务规则和逻辑&#xff0c;从而维护数据的准确性和可靠性。 1.2作用 数据完整性 &#xff1a;约束可以确保数据在插入、更新或删除时符…...

编程日记 2025/9/13 20:38:09

如何看待 Kaiming He 最新提出的 Fractal Generative Models ？

何恺明团队提出的分形生成模型（Fractal Generative Models） 引发了广泛关注，其核心思想是通过递归调用生成模型模块构建自相似结构，类似数学中的分形概念（如雪花结构），从而高效生成高分辨率数据（如图像）。 Fractal Generative Models即分形生成模型，是一种新型的生成…...

编程日记 2025/9/11 21:48:32

【大模型系列篇】如何解决DeepSeek-R1结构化输出问题，使用PydanticAl和DeepSeek构建结构化Agent

今日号外&#xff1a;&#x1f525;&#x1f525;&#x1f525; DeepSeek开源周&#xff1a;炸场&#xff01;DeepSeek开源FlashMLA&#xff0c;提升GPU效率 下面我们开始今天的主题&#xff0c;deepseek官方明确表示deepseek-r1目前不支持json输出/function call&#xff0c;可…...

编程日记 2025/9/9 10:49:13

Metal 学习笔记五：3D变换

在上一章中&#xff0c;您通过在 vertex 函数中计算position&#xff0c;来平移顶点和在屏幕上移动对象。但是&#xff0c;在 3D 空间中&#xff0c;您还想执行更多操作&#xff0c;例如旋转和缩放对象。您还需要一个场景内摄像机&#xff0c;以便您可以在场景中移动。 要移动…...

编程日记 2025/9/13 9:59:33

Android-创建mipmap-anydpi-v26的Logo

利用 Android Studio 自动创建 创建新项目&#xff1a;打开 Android Studio&#xff0c;点击 “Start a new Android Studio project” 创建新项目。在创建项目的过程中&#xff0c;当设置Target SDK Version为 26 或更高版本时&#xff0c;Android Studio 会在项目的res目录下…...

编程日记 2025/9/12 15:22:48

DOM 事件 HTML 标签属性速查手册

以下是一份 DOM 事件 & HTML 标签属性速查手册&#xff0c;涵盖常用场景和示例&#xff0c;助你快速查阅和使用&#xff1a; 一、DOM 事件速查表 1. 鼠标事件 事件名触发时机适用元素示例代码click元素被点击任意可见元素button.addEventListener(click, () > { ... …...

编程日记 2025/9/8 15:07:22

差旅费控平台作用、功能、11款主流产品优劣势对比

本文将对比以下11款主流费控系统&#xff1a;合思、喜报销、泛微费控报销系统、经贝管家、每刻报销、SAP Concur、Expensify、Zoho Expense等。 随着全球化和企业跨地区运营的不断发展&#xff0c;企业差旅管理已逐渐成为许多公司面临的管理挑战之一。从差旅申请到费用报销的全…...

编程日记 2025/9/12 7:28:33

常用的配置文件格式对比（ini，toml，yaml，json，env，settings.py）及应用程序修改自身配置并保留注释

代码与环境配置解耦 git分支的代码应做到“环境无关”&#xff1a;代码本身不硬编码任何环境特定的配置&#xff08;如数据库连接、密钥、API地址&#xff09;&#xff0c;而是通过外部机制动态注入。 配置与代码分离&#xff1a;将配置信息存储在代码库之外&#xff08;如环…...

编程日记 2025/9/11 12:01:07

MySQL 存储过程详解

文章目录 1. 存储过程定义1.1 基本概念1.2 核心特点1.3 存储过程 vs 函数 2. 工作原理与示意图2.1 执行流程2.2 示意图 3. 使用场景3.1 复杂业务逻辑3.2 批量数据处理3.3 权限控制3.4 性能优化 4. 示例与说明4.1 基础示例&#xff1a;创建存储过程4.2 带输出参数的存储过程4.3 …...

编程日记 2025/9/10 22:24:26

使用DeepSeek/chatgpt等AI工具辅助网络协议流量数据包分析

随着deepseek,chatgpt等大模型的能力越来越强大&#xff0c;本文将介绍一下deepseek等LLM在分数流量数据包这方面的能力。为需要借助LLM等大模型辅助分析流量数据包的同学提供参考&#xff0c;也了解一下目前是否有必要继续学习wireshark工具以及复杂的协议知识。 pcap格式 目…...

编程日记 2025/9/12 16:11:51

源码压缩包泄露

##解题思路 因为网站的文件都放在www下面&#xff0c;所以直接访问/www.zip就可以得到网页的源码压缩包 在fl000g.txt这个文件中看到一个flag{flag_here}不像是真的flag&#xff0c;尝试提交ctfshow{flag_here}&#xff0c;果然提交失败 打开文件属性之类的&#xff0c;也没有…...

编程日记 2025/9/10 15:15:39

TCP/IP 5层协议簇：数据链路层（交换机工作原理）

目录 1. 数据链路层 2. 帧 3. 工作在数据链路层的设备 4. 交换机工作原理 1. 数据链路层 数据链路层&#xff08;2层Data Link Layer&#xff09;&#xff1a;传输单元是帧、这层工作的主要设备二层交换机、网卡 2. 帧 帧的结构如下&#xff1a;帧最大1518字节 如下&…...

编程日记 2025/9/13 0:48:01

TCP/IP的分层结构、各层的典型协议，以及与ISO七层模型的差别

1. TCP/IP的分层结构 TCP/IP模型是一个四层模型&#xff0c;主要用于网络通信的设计和实现。它的分层结构如下&#xff1a; (1) 应用层&#xff08;Application Layer&#xff09; 功能&#xff1a;提供应用程序之间的通信服务&#xff0c;处理特定的应用细节。 典型协议&am…...

编程日记 2025/9/11 12:24:18

【分布式理论11】分布式协同之分布式事务（一个应用操作多个资源）：从刚性事务到柔性事务的演进

文章目录 一. 什么是分布式事务&#xff1f;二. 分布式事务的挑战三. 事务的ACID特性四. CAP理论与BASE理论1. CAP理论1.1. 三大特性1.2. 三者不能兼得 2. BASE理论 五. 分布式事务解决方案1. 两阶段提交&#xff08;2PC&#xff09;2. TCC&#xff08;Try-Confirm-Cancel&…...

编程日记 2025/9/11 1:00:23

Linux: 已占用接口

Linux: 已占用接口 1. netstat&#xff08;适用于旧系统&#xff09;1.1 书中对该命令的介绍 2. ss&#xff08;适用于新系统&#xff0c;替代 netstat&#xff09;3. lsof&#xff08;查看详细进程信息&#xff09;4. fuser&#xff08;快速查找占用端口的进程&#xff09;5. …...

编程日记 2025/9/10 19:34:35

HWUI 和 Skia

&#x1f4cc; HWUI 和 Skia 的关系 Skia 是 Android 的底层 2D 图形库&#xff0c;提供 CPU 和 GPU 渲染能力&#xff0c;支持 OpenGL、Vulkan、Metal 等后端。HWUI 是 Android UI 组件的 GPU 渲染引擎&#xff0c;主要用于 加速 View、动画、阴影等 UI 元素的绘制。HWUI 依赖…...

编程日记 2025/9/11 14:09:56

Pytorch使用手册--将 PyTorch 模型导出为 ONNX（专题二十六）

注意 截至 PyTorch 2.1，ONNX 导出器有两个版本。 torch.onnx.dynamo_export 是最新的（仍处于测试阶段）导出器，基于 PyTorch 2.0 发布的 TorchDynamo 技术。 torch.onnx.export 基于 TorchScript 后端，自 PyTorch 1.2.0 起可用。 一、torch.onnx.dynamo_export使用 在 60 …...

编程日记 2025/9/11 13:30:24

GitHub SSH连接问题解决指南

&#x1f50d; GitHub SSH连接问题解决指南 问题描述 遇到错误&#xff1a;ssh: connect to host github.com port 22: Connection refused 说明您的网络环境无法访问GitHub的SSH端口22&#xff0c;常见原因&#xff1a; 防火墙/网络运营商限制&#xff08;国内常见&#xf…...

编程日记 2025/9/13 22:59:11

【Linux】vim 设置

【Linux】vim 设置 零、起因 刚学Linux&#xff0c;有时候会重装Linux系统&#xff0c;然后默认的vi不太好用&#xff0c;需要进行一些设置&#xff0c;本文简述如何配置一个好用的vim。 壹、软件安装 sudo apt-get install vim贰、配置路径 对所有用户生效&#xff1a; …...

编程日记 2025/9/10 15:24:48

2025届开发岗秋招经验教训总结

实习 实习的作用&#xff1a; 学习知识&#xff0c;充实简历了解特定部门的氛围转正比秋招提前占坑提前展现工作能力&#xff0c;争取更高起薪 其中&#xff0c;除非有梦中情组&#xff0c;我认为占坑是最不重要的一个&#xff0c;因为现在的校招就业形势并未严峻到转正占满…...

编程日记 2025/9/6 18:37:51

Java 之集成 DataX 数据同步工具

1、官网下载 DataX https://github.com/alibaba/DataX 2、将依赖添加到本地&#xff08;DataX没有maven坐标&#xff0c;需要自己安装&#xff09; mvn install:install-file -Dfile"datax-common-0.0.1.jar" "-DgroupIdcom.datax" "-DartifactIdda…...

编程日记 2025/9/10 16:30:04

JMH 详细使用

JMH 基本使用 官方地址 JMH 是一个用于 Java 代码微基准测试的工具&#xff0c;允许开发者对特定部分进行精确的性能测试&#xff1b; 安装 JMH 环境&#xff1a; Maven 项目&#xff1b;JDK 8&#xff1b; Maven 方式安装 引入如下依赖&#xff1a; <dependencies>…...

编程日记 2025/9/13 11:39:41

2025 PHP授权系统网站源码

2025 PHP授权系统网站源码 安装教程&#xff1a; PHP7.0以上 先上传源码到服务器&#xff0c;然后再配置伪静态&#xff0c; 访问域名根据操作完成安装&#xff0c; 然后配置伪静态规则。 Ngix伪静态规则&#xff1a; location / { if (!-e $request_filename) { rewrite …...

编程日记 2025/9/13 18:31:15

【对话推荐系统】Towards Topic-Guided Conversational Recommender System 论文阅读

Towards Topic-Guided Conversational Recommender System 论文阅读 Abstract1 Introduction2 Related Work2.1 Conversation System2.2 Conversational Recommender System2.3 Dataset for Conversational Recommendation 3 Dataset Construction3.1 Collecting Movies for Re…...

编程日记 2025/9/10 10:00:32

git 使用常见错误整理

1. git am 应用补丁时遇到错误 fatal: previous rebase directory .git/rebase-apply still exists but mbox given fatal:之前的变基目录 .git/rebase-apply仍然存在&#xff0c;但却提供了mbox 答&#xff1a;这通常是因为之前的 git am 或 git rebase 操作失败后&#xf…...

编程日记 2025/9/9 20:30:03

数据存储：一文掌握存储数据到mysql的详细使用

文章目录 一、环境准备1.1 安装MySQL数据库1.2 安装Python MySQL驱动 二、连接到MySQL数据库三、执行基本的CRUD操作3.1 创建&#xff08;Create&#xff09;&#xff1a;插入数据3.2 读取&#xff08;Read&#xff09;&#xff1a;查询数据3.3 更新&#xff08;Update&#xf…...

编程日记 2025/9/9 3:54:52

React 源码揭秘 | 更新队列

前面几篇遇到updateQueue的时候&#xff0c;我们把它先简单的当成了一个队列处理&#xff0c;这篇我们来详细讨论一下这个更新队列。 有关updateQueue中的部分&#xff0c;可以见源码 UpdateQueue实现 Update对象 我们先来看一下UpdateQueue中的内容&#xff0c;Update对象&…...

编程日记 2025/9/8 11:35:02

Vue3 + Vite + TS,使用 配置项目别名属性：resolve

使用 resolve 配置全局项目路径别名 1.优化了开发中单页面引用其他模块的路径复杂性 2.妥妥解决了&#xff0c;组件复用当中提高开发效率 // 不使用配置 import { useStore } from ../../../stores // 使用配置 可根据开发者需求任意定义&#xff0c;较多 import { useStore…...

编程日记 2025/9/9 2:18:30

使用 C# 以api的形式调用 DeepSeek

一&#xff1a;创建 API 密钥 首先&#xff0c;您需要来自 DeepSeek 的 API 密钥。访问 DeepSeek&#xff0c;创建一个帐户&#xff0c;并生成一个新的 API 密钥。 二&#xff1a;安装所需的 NuGet 包 使用 NuGet 包管理器安装包&#xff0c;或在包管理器控制台中运行以下命…...

编程日记 2025/9/11 17:56:50

手机放兜里，支付宝“碰一下”被盗刷？

大家好&#xff0c;我是小悟。 近期&#xff0c;网络上关于“支付宝‘碰一下’支付易被盗刷”的传言甚嚣尘上&#xff0c;不少用户对此心生疑虑。 首先&#xff0c;要明确一点&#xff1a;“碰一下”支付并不会像某些传言中所描述的那样容易被隔空盗刷。这一观点已经得到了支付…...

编程日记 2025/8/17 8:44:26

0x01 html和css

css 对于三种css使用方式&#xff1a; 第一种&#xff1a;行内样式 <span style"color: grey;">2024年05月15日 20:07</span>第二种&#xff1a;内部样式 <!DOCTYPE html> <html lang"en"> <head>...<style>span{…...

编程日记 2025/9/10 10:22:20

模型和数据集的平台之在Hugging Face上进行模型下载、上传以及创建专属Space

模型下载 步骤&#xff1a; 注册Hugging Face平台 https://huggingface.co/ 新建一个hf_download_josn.py 文件 touch hf_download_josn.py 编写hf_download_josn.py文件 import os from huggingface_hub import hf_hub_download# 指定模型标识符 repo_id "inter…...

编程日记 2025/9/12 15:09:17

轮式机器人在复杂地形中如何选择合适的全局路径规划算法？

已思考完成 收起 嗯&#xff0c;用户问的是轮式机器人在复杂地形中如何选择合适的全局路径规划算法。首先&#xff0c;我需要理解复杂地形可能带来的挑战&#xff0c;比如崎岖的路面、动态障碍物、非结构化环境等等。轮式机器人在这里的运动控制需要考虑地形通过性、稳定性&…...

编程日记 2025/9/9 3:49:18

免费使用 DeepSeek API 教程及资源汇总

免费使用 DeepSeek API 教程及资源汇总 一、DeepSeek API 资源汇总1.1 火山引擎1.2 百度千帆1.3 阿里百炼1.4 腾讯云 二、其他平台2.1 华为云2.2 硅基流动 三、总结 DeepSeek-R1 作为 2025 年初发布的推理大模型&#xff0c;凭借其卓越的逻辑推理能力和成本优势&#xff0c;迅速…...

编程日记 2025/9/12 14:22:32

文献汇总｜AI生成图像检测相关数据集汇总

前言&#xff1a;本博客汇总当前AI生成图像检测领域用到的数据集及相关链接。 ⚠️&#xff1a;除标注「未公开」数据集&#xff0c;其余数据集均已开源。 目录 2020202220232024 2020 CNNSpot https://github.com/peterwang512/CNNDetection Testset: The zip file contains …...

编程日记 2025/9/13 23:17:31

C# 弃元的使用

总目录 前言 在C# 7.0及更高版本中&#xff0c;弃元&#xff08;Discard&#xff09;是一个新的语言特性&#xff0c;允许开发者在特定情况下忽略某些值。弃元用下划线 _ 作为占位符&#xff0c;明确表示忽略某个值&#xff0c;提升代码可读性 一、弃元是什么&#xff1f; 1.…...

编程日记 2025/9/11 0:44:08

蓝桥杯备考：贪心算法之矩阵消除游戏

这道题是牛客上的一道题&#xff0c;它呢和我们之前的排座位游戏非常之相似&#xff0c;但是&#xff0c;排座位问题选择行和列是不会改变元素的值的&#xff0c;这道题呢每每选一行都会把这行或者这列清零&#xff0c;所以我们的策略就是先用二进制把选择所有行的情况全部枚举…...

编程日记 2025/9/8 21:46:18

React面试（一）

文章目录 1.vue和react有什么异同2.useEffect中为什么不能使用异步3.useEffect和useLayoutEffect的区别4.react的生命周期5.state和prop的区别6.受控组件和非受控组件7.为什么react16之后不把事件挂载到document上了8.讲一下react的hoc&#xff0c;它可以用来做什么&#xff1f…...

编程日记 2025/9/14 4:16:55

《解锁AI密码，机器人精准感知环境不再是梦！》

在科技飞速发展的当下&#xff0c;人工智能与机器人技术的融合正深刻改变着世界。其中&#xff0c;人工智能助力机器人实现更精准的环境感知&#xff0c;已成为该领域的核心课题&#xff0c;吸引着全球科研人员与科技企业的目光。这不仅关乎机器人能否在复杂环境中高效执行任务…...

编程日记 2025/9/13 21:20:21

C/C++语言知识点二

1. 编程算法之“哨兵”思想 哨兵思想是一种编程技巧&#xff0c;通过在数据结构的边界或特定位置放置一个特殊值&#xff08;称为“哨兵”&#xff09;&#xff0c;来简化逻辑判断和提高代码效率。哨兵通常是一个标记值&#xff0c;用于指示某种条件或边界&#xff0c;从而避免…...

编程日记 2025/9/7 21:45:13

【SpringBoot】——分组校验、自定义注解、登入验证（集成redis）、属性配置方式、多环境开发系统学习知识

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大三学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…...

编程日记 2025/9/11 1:25:49

【EB-03】 AUTOSAR builder与EB RTE集成

AUTOSAR builder与EB RTE集成 1. Import Arxml files to Tresos2. Run MultiTask Script3. Add Components3.1 Run EcuExtractCreator Script4. Mapping Component to Partitions5. Event Mapping/Runnables Mapping to Tasks6. Port Connect7. Run SvcAs_Trigger Script8. Ver…...

编程日记 2025/9/9 16:15:30

布署elfk-准备工作

建议申请5台机器部署elfk&#xff1a; filebeat(每台app)--> logstash(2台keepalived)--> elasticsearch(3台)--> kibana(部署es上)采集输出 处理转发 分布式存储 展示 ELK中文社区: 搜索客&#xff0c;搜索人自己的社区 官方…...

编程日记 2025/9/11 3:51:19

JVM垃圾回收器深度底层原理分析与知识体系构建

一、垃圾回收的基本步骤 标记&#xff08;Marking&#xff09; 从GC Roots&#xff08;如虚拟机栈、方法区静态变量、本地方法栈等&#xff09;出发&#xff0c;遍历对象引用链&#xff0c;标记所有可达对象为存活对象&#xff0c;未被标记的则视为垃圾。此阶段需暂停用户线程&…...

编程日记 2025/9/10 1:10:08

Flutter系列教程之(5)——常用控件Widget的使用示例

目录 1.页面跳转 2.某个控件设置点击事件 3.AlertDialog对话框的使用 4.文本输入框 5.按钮 圆角扁平按钮: 圆角悬浮按钮: 6.补充 圆点 7.布局使用 Row控件左右对齐 调整边距 1.页面跳转 首先&#xff0c;先介绍一下页面跳转功能吧 Flutter使用 Navigator 进行页面…...

编程日记 2025/9/10 16:00:16

快手前端通用静态托管服务KFX演进历程：从崎岖土路到平坦高速

快手静态部署托管服务&#xff08;KFX&#xff09;历经四年发展&#xff0c;经历了三个阶段&#xff0c;一步步从勉强能行车的“崎岖土路”到现在多车道并行的“平坦高速”&#xff0c;这一转变极大地提升了资源利用率和效率&#xff0c;满足业务的实际需要。本文将带你了解其背…...

编程日记 2025/9/10 14:19:40

hackmyvm-buster

题目地址 信息收集 主机发现 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…...

编程日记 2025/9/10 9:40:39