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

用CSS中的动画效果做一个转动的表

news 2026/5/17 0:26:39 
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-radius: 50%;border:1px solid black;/*父绝子相*/position: relative;/*还可以设置表盘背景*/background-color: pink;}.clock>div{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}/*设置时针*/.hour-wrapper{height: 70%;width: 70%;/*linear为匀速运动*/animation: run 7200s linear infinite;}.hour{height: 50%;width: 6px;background-color: #000;margin:0 auto;}/*设置分针*/.min-wrapper{height: 80%;width: 80%;animation: run 600s steps(60) infinite;  /*因为秒针设置为10s,所以分钟数为60*10s=600s*/}.min{height: 50%;width: 4px;background-color: #000;margin:0 auto;}/*设置秒针*/.sec-wrapper{height: 95%;width: 95%;animation: run 10s steps(60) infinite;}.sec{height: 50%;width: 2px;background-color: #f00;margin:0 auto;}/*设置动画*/@keyframes run {from{transform:rotateZ(0);}to{transform: rotateZ(360deg);}}</style></head><body><!--在秒针外面设置父元素，因为秒针旋转的轴心是一端，而做出来动画中秒针旋转的轴心是线的中间，所以要设置一个父元素，将线的另一半进行一个遮盖，让视觉效果和真正的秒针一样--><!--创建表的容器--><div class="clock"><!--创建时针--><div class="hour-wrapper"><div class="hour"></div></div><!--设置分针--><div class="min-wrapper"><div class="min"></div></div><!--设置秒针--><div class="sec-wrapper"><div class="sec"></div></div></div></body>
</html>

相关文章：

用CSS中的动画效果做一个转动的表

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…...

编程日记 2023/12/31 5:30:46

【linux】Linux管道的原理与使用场景

Linux管道是Linux命令行界面中一种强大的工具&#xff0c;它允许用户将多个命令链接起来&#xff0c;使得一个命令的输出可以作为另一个命令的输入。这种机制使得我们可以创建复杂的命令链&#xff0c;并在处理数据时提供了极大的灵活性。在本文中&#xff0c;我们将详细介绍Li…...

编程日记 2023/12/31 5:29:45

nvidia jetson xavier nx developer kit version emmc版重装系统

一、将开发板上的外置硬盘取下来格式化 二、在双系统ubuntu安装SDK Manager&#xff08;.deb文件&#xff09; SDK Manager | NVIDIA Developer sudo apt install ./sdkmanager_1.9.2-10884_amd64.deb 报错直接百度错误&#xff0c;执行相应命令即可 三、 运行SDK Manager …...

编程日记 2023/12/31 5:25:42

命令模式-实例使用

未使用命令模式的UML 使用命令模式后的UML public abstract class Command {public abstract void execute(); }public class Invoker {private Command command;/*** 为功能键注入命令* param command*/public void setCommand(Command command) {this.command command;}/***…...

编程日记 2023/12/31 5:23:40

将网页变身移动应用：网址封装成App的完全指南

什么是网址封装&#xff1f; 网址封装是一个将你的网站或网页直接嵌入到一个原生应用容器中的过程。用户可以通过下载你的App来访问网站&#xff0c;而无需通过浏览器。这种方式不仅提升了用户体验&#xff0c;还可利用移动设备的功能&#xff0c;如推送通知和硬件集成。 小猪…...

编程日记 2023/12/31 5:19:37

探讨kernel32.dll文件是什么，有效解决kernel32.dll丢失

在使用电脑时&#xff0c;你是否遇到过kernel32.dll丢失的困扰&#xff1f;面对这个问题&#xff0c;我们需要及时去解决kernel32.dll丢失的问题。接下来&#xff0c;我们将深入探讨kernel32.dll的功能以及其在操作系统和应用程序中的具体应用领域&#xff0c;相信这将对你解决…...

编程日记 2023/12/31 5:17:35

LOAM: Lidar Odometry and Mapping in Real-time 论文阅读

论文链接 LOAM: Lidar Odometry and Mapping in Real-time 0. Abstract 提出了一种使用二维激光雷达在6自由度运动中的距离测量进行即时测距和建图的方法 距离测量是在不同的时间接收到的&#xff0c;并且运动估计中的误差可能导致生成的点云的错误配准 本文的方法在不需要高…...

编程日记 2023/12/31 5:16:34

如何使用Docker将.Net6项目部署到Linux服务器（三）

目录 四 安装nginx 4.1 官网下载nginx 4.2 下载解压安装nginx 4.3 进行configure 4.4 执行make 4.5 查看nginx是否安装成功 4.6 nginx的一些常用命令 4.6.1 启动nginx 4.6.2 通过命令查看nginx是否启动成功 4.6.3 关闭Nginx 4.6.5 重启Nginx 4.6.6 杀掉所有Nginx进程 4.…...

编程日记 2023/12/31 5:10:29

《Spring Cloud学习笔记：分布式事务Seata》

解决分布式事务的方案有很多&#xff0c;但实现起来都比较复杂&#xff0c;因此我们一般会使用开源的框架来解决分布式事务问题。 在众多的开源分布式事务框架中&#xff0c;功能最完善、使用最多的就是阿里巴巴在2019年开源的Seata了。 1. 初识Seata Seata是 2019 年 1 月…...

编程日记 2023/12/31 5:09:27

MySQL：权限控制

要授予用户帐户权限&#xff0c;可以用GRANT命令。有撤销用户的权限&#xff0c;可以用REVOKE命令。这里以 MySQl 为例&#xff0c;介绍权限控制实际应用。 GRANT授予权限语法&#xff1a; GRANT privilege,[privilege],.. ON privilege_level TO user [IDENTIFIED BY passwo…...

编程日记 2023/12/31 5:08:27

安全生产知识竞赛活动方案

为进一步普及安全生产法律法规知识&#xff0c;增强安全意识&#xff0c;提高安全技能&#xff0c;经研究&#xff0c;决定举办以“加强安全法治、保障安全生产”为主题的新修订《安全生产法》知识竞赛活动&#xff0c;现将有关事项通知如下&#xff1a; 一、活动时间&#xf…...

编程日记 2023/12/31 5:07:26

2023 IoTDB Summit：天谋科技 CTO 乔嘉林《IoTDB 企业版 V1.3： 时序数据管理一站式解决方案》...

12 月 3 日&#xff0c;2023 IoTDB 用户大会在北京成功举行&#xff0c;收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题&#xff0c;多位学术泰斗、企业代表、开发者&#xff0c;深度分享了工业物联网时序数据库 IoTDB 的技术创新…...

编程日记 2023/12/31 5:00:19

LangChain.js 实战系列：如何统计大模型使用的 token 使用量和花费

&#x1f4dd; LangChain.js 是一个快速开发大模型应用的框架&#xff0c;它提供了一系列强大的功能和工具&#xff0c;使得开发者能够更加高效地构建复杂的应用程序。LangChain.js 实战系列文章将介绍在实际项目中使用 LangChain.js 时的一些方法和技巧。 统计调用大模型的 to…...

编程日记 2023/12/31 4:56:15

基于多反应堆的高并发服务器【C/C++/Reactor】（中）EventLoop初始化

这个Dispatcher是一个事件分发模型&#xff0c;通过这个模型,就能够检测对应的文件描述符的事件的时候,可以使用epoll/poll/select,前面说过三选一。另外不管是哪一个底层的检测模型,它们都需要使用一个数据块,这个数据块就叫做DispatcherData。除此之外,还有另外一个部分,因为…...

编程日记 2023/12/31 4:50:10

OpenCV(Python)基础—9小时入门版

OpenCV(Python)基础—9小时入门版 # # Author : Mikigo # Time : 2021/12/1 # 一、一句话简介 OpenCV (Open Source Computer Vision Library) 是用 C 语言编写&#xff0c;提供 Python、Java 等语言 API的一个开源计算机视觉库。 二、安装 1、Debian 系使用 apt 安装 O…...

编程日记 2023/12/31 4:44:05

SpringBoot整合Canal

一 linux docker compose版本 1.第一步&#xff1a;基础环境 &#xff08;1&#xff09;第1步&#xff1a;安装jak、maven、git、nodejs、npm yum install maven mvn -v 安装maven时会帮安装jdkyum install git git --version 2.27.0yum in…...

编程日记 2023/12/31 4:41:03

用 Python 提取某一个公众号下的所有文章

当我们想要提取某一个公众号下的所有文章时&#xff0c;我们可以借助微信公众平台的开放接口&#xff0c;通过Python编写一个爬虫程序来实现。下面是一个示例代码&#xff0c;以及如何将其转化为一篇详细的微信公众号推文文章。 1. 导入所需库 首先&#xff0c;我们需要导入所…...

编程日记 2023/12/31 4:35:56

鸿蒙4.0实战教学—基础ArkTS（简易视频播放器）

构建主界面 主界面由视频轮播模块和多个视频列表模块组成&#xff0c;效果图如图&#xff1a; VideoData.ets中定义的视频轮播图数组SWIPER_VIDEOS和视频列表图片数组HORIZONTAL_VIDEOS。 // VideoData.ets import { HorizontalVideoItem } from ./HorizontalVideoItem; impo…...

编程日记 2023/12/31 4:34:55

4. 深入 Python 流程控制

​​​​​​ 4. 深入 Python 流程控制 除了前面介绍的 while 语句&#xff0c;Python 还从其它语言借鉴了一些流程控制功能&#xff0c;并有所改变。 4.1. if 语句 也许最有名的是 if 语句。例如: >>> x int(raw_input("Please enter an integer: "))…...

编程日记 2023/12/31 4:33:54

2000-2022年上市公司股票流动性指标数据/股票流动性Amihud（原始数据+计算代码+计算结果）

2000-2022年上市公司股票流动性指标数据/股票流动性Amihud&#xff08;原始数据计算代码计算结果&#xff09; 1、时间&#xff1a;2000-2022年 3、指标&#xff1a;证券代码_没有单位、交易日期_没有单位、日个股交易金额_元、考虑现金红利再投资的日个股回报率_没有单位、交…...

编程日记 2023/12/31 4:32:53

FPGA驱动ADS1256的ADC精度优化实战（三）

1. 硬件连接优化&#xff1a;从杜邦线到PCB布局的精度跃升 第一次用杜邦线连接FPGA和ADS1256时&#xff0c;我测得的电压误差居然有30mV&#xff0c;这让我差点怀疑人生。后来把万用表直接怼到ADC引脚上&#xff0c;才发现杜邦线本身就有5-8mV的压降波动。这种看似微不足道的干…...

编程新知 2026/5/16 23:35:01

从竞赛到实践：基于TDOA的声源定位系统设计与实现

1. 从竞赛到实战&#xff1a;TDOA声源定位系统设计全解析 第一次接触声源定位是在大三的电子设计竞赛上&#xff0c;当时看着题目要求"用激光笔追踪移动声源"&#xff0c;我和队友面面相觑——这玩意儿真能实现吗&#xff1f;三年后&#xff0c;当我负责公司智能会议…...

编程新知 2026/5/16 23:28:51

555时基电路：从内部原理到三大经典应用模式全解析

1. 从“黑盒子”到“瑞士军刀”&#xff1a;初识555时基电路如果你刚开始接触电子设计&#xff0c;或者玩过一些简单的单片机项目&#xff0c;可能会觉得产生一个精确的延时、一个稳定的方波信号&#xff0c;或者把一个不规则的波形“修整”得漂漂亮亮&#xff0c;是一件需要写…...

编程新知 2026/5/16 23:18:02

大模型涌现能力：从原理到工程实践的探索与分类

1. 项目概述&#xff1a;从“玄学”到“科学”的涌现能力探索最近和几个做模型研发的朋友聊天&#xff0c;大家不约而同地提到了一个词&#xff1a;“涌现能力”。这个词听起来有点玄乎&#xff0c;像是某种不可预测的“魔法”&#xff0c;但当我们深入讨论时&#xff0c;发现它…...

编程新知 2026/5/16 22:43:08

智能卡通信调优实战：手把手教你用逻辑分析仪抓取并解析ISO7816 PPS协商过程

智能卡通信调优实战&#xff1a;手把手教你用逻辑分析仪抓取并解析ISO7816 PPS协商过程 在嵌入式系统和智能卡应用开发中&#xff0c;通信稳定性往往是项目成败的关键。当你的智能卡设备频繁出现通信中断、数据丢失或速率不达标时&#xff0c;问题很可能隐藏在协议协商阶段。IS…...

编程新知 2026/5/16 22:30:42

FPGA开发入门：从零开始用Vivado实现LED流水灯项目

1. 项目概述与核心价值最近在后台和社群里&#xff0c;看到不少刚接触FPGA开发的朋友&#xff0c;特别是从单片机或嵌入式软件转过来的&#xff0c;对于如何上手第一个完整的FPGA项目感到有些迷茫。大家常问&#xff1a;“我学了Verilog语法&#xff0c;也跑过仿真了&#xff0…...

编程新知 2026/5/16 22:15:50

开源AI代码助手本地化部署：从Cursor10x看私有化编程助手实践

1. 项目概述&#xff1a;当AI代码助手遇上开源社区如果你是一名开发者&#xff0c;最近可能频繁听到一个词&#xff1a;Cursor。这款集成了强大AI能力的代码编辑器&#xff0c;正以惊人的速度改变着许多人的编程习惯。它不再仅仅是一个文本编辑器&#xff0c;更像是一个能理解你…...

编程新知 2026/5/16 19:37:46

Steam游戏清单一键下载：告别繁琐操作，3分钟搞定你的游戏库管理

Steam游戏清单一键下载&#xff1a;告别繁琐操作&#xff0c;3分钟搞定你的游戏库管理 【免费下载链接】Onekey Onekey Steam Depot Manifest Downloader 项目地址: https://gitcode.com/gh_mirrors/one/Onekey 还在为复杂的Steam游戏清单下载而烦恼吗&#xff1f;Oneke…...

编程新知 2026/5/16 19:08:14

如何快速掌握LiteDB.Studio：面向初学者的LiteDB数据库终极GUI管理工具完整指南

如何快速掌握LiteDB.Studio&#xff1a;面向初学者的LiteDB数据库终极GUI管理工具完整指南 【免费下载链接】LiteDB.Studio A GUI tool for viewing and editing documents for LiteDB v5 项目地址: https://gitcode.com/gh_mirrors/li/LiteDB.Studio 在嵌入式数据库应用…...

编程新知 2026/5/16 17:54:45

实验室小白避坑指南：在浪潮AiStation上从零部署PyTorch项目（含离线环境打包）

实验室科研实战&#xff1a;浪潮AiStation离线部署PyTorch全流程解析 当实验室服务器遭遇网络隔离与资源限制时&#xff0c;如何高效部署深度学习项目成为每个科研新手的必修课。本文将针对浪潮AiStation平台的特殊性&#xff0c;系统梳理从环境准备到代码运行的完整闭环&#…...

编程新知 2026/5/16 17:33:43