用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-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/227689.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣:62. 不同路径(动态规划,附python二维数组的定义)

题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&…

使用vmware,在ubuntu18.04中使用笔记本的摄像头

步骤1&#xff1a;在windows中检查相机状态 win10系统中&#xff0c;在左下的搜索栏&#xff0c;搜索“相机”&#xff0c;点击进入即可打开相机&#xff0c;并正常显示图像。 注意&#xff1a;如果相机连接到了虚拟机&#xff0c;则不能显示正常。 步骤2&#xff1a;在ubuntu…

百度沧海文件存储CFS推出新一代Namespace架构

随着移动互联网、物联网、AI 计算等技术和市场的迅速发展&#xff0c;数据规模指数级膨胀&#xff0c;对于分布式文件系统作为大规模数据场景的存储底座提出了更高的要求。已有分布式文件系统解决方案存在着短板&#xff0c;只能适应有限的场景&#xff1a; >> 新型分布式…

Vue.js学习笔记(1)——Visual Studio Code搭建Vue.js框架

1 安装Node.js 1、下载安装包&#xff1a;进入官网&#xff08;https://nodejs.org/en&#xff09;&#xff0c;下载左侧的稳定版。 2、选择安装位置&#xff0c;不用勾选自动安装必要工具。 其他都默认Next。 配置环境&#xff0c;具体参考本文章&#xff1a; https://blo…

性能测试-jmeter:安装 / 基础使用

一、理解jmeter 官网-Apache JMeter-Apache JMeter™ JMeter是一款开源的性能测试工具&#xff0c;主要用于模拟大量用户并发访问目标服务器&#xff0c;以评估服务器的性能和稳定性。 JMeter可以执行以下任务序号用途描述1性能测试通过模拟多个用户在同一时间对服务器进行请…

Markdown之EBNF语法介绍(二十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

2023 年中国金融级分布式数据库市场报告:TiDB 位列领导者梯队,创新能力与增长指数表现突出

近日&#xff0c;沙利文联合头豹研究院发布了中国数据库系列报告之《2023 年中国金融级分布式数据库市场报告》。 报告认为&#xff0c;金融行业对于分布式数据库信任度与认可度正在逐步提高&#xff0c;中国金融级分布式数据库市场正处于成熟落地的高增长阶段&#xff0c;行业…

Ubuntu安装K8S的dashboard(管理页面)

原文网址&#xff1a;Ubuntu安装k8s的dashboard&#xff08;管理页面&#xff09;-CSDN博客 简介 本文介绍Ubuntu安装k8s的dashboard&#xff08;管理页面&#xff09;的方法。 Dashboard的作用有&#xff1a;便捷操作、监控、分析、概览。 相关网址 官网地址&#xff1a;…

Android Studio如何创建尺寸大小及API通用的模拟器

目录 前言 一、操作步骤 二、总结 三、更多资源 前言 在开发移动应用程序的过程中&#xff0c;使用模拟器进行测试是一种常见和方便的方式。Android Studio是一款功能强大的集成开发环境&#xff0c;它提供了创建和管理模拟器的功能。在本文中&#xff0c;我们将介绍如何创…

前端三件套html/css/js的基本认识以及示例程序

简介 本文简要讲解了html,css,js.主要是让大家简要了解网络知识 因为实际开发中很少直接写html&css,所以不必过多纠结,了解一下架构就好 希望深度学习可以参考MDN和w3school HTML 基础 HTML (Hyper Text Markup Language) 不是一门编程语言,而是一种用来告知浏览器如…

【Java】log4j和slf4j区别

log4j&#xff1a;Apache Software Foundation 开源 slf4j&#xff1a;不支持日志滚动等高级功能 在开源库或内部库中使用 SLF4J&#xff0c;将使其独立于任何特定的日志记录实现&#xff0c;这意味着无需为多个库管理多个日志记录配置&#xff0c;您的客户端将会很需要这一点…

5G智慧港口简述

港口作为交通运输的枢纽,在促进国际贸易和地区发展中起着举足轻重的作用,全球贸易中约 90% 的贸易由海运业承载,作业效率对于港口至关重要。在“工业 4.0”、“互联网 +”大发展的时代背景下,港口也在进行数字化、全自动的转型升级。随着全球 5G 技术浪潮的到来,华为、振华…

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

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

javascript 常见事件

简介&#xff1a; JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式…

02 HAL库驱动按键响应外部中断

引言&#xff1a;这里我采用的实验平台可能跟大家的不太一样&#xff0c;文章的图像是一块资源拓展板&#xff0c; 主控板式fs_mp1a, 该板子的SOC是stm32mp157a&#xff0c; 有两个内核一个A7&#xff0c; 一个M4.但是实验的流程肯定都是一样的&#xff0c; 因为都是裸机程序嘛…

html文件Js写输入框和弹框调接口jQuery

业务场景&#xff1a;需要使用写一个html文件&#xff0c;实现输入数字&#xff0c;保存调接口。 1、使用 JS原生写法&#xff0c; fetchAPI调接口&#xff0c;使用 alert 方法弹框会阻塞线程&#xff0c;所以写了一个弹框。 <!DOCTYPE html> <html lang"en"…

Android Studio下载gradle失败

1、打开Android Studio设置Gradle的地方&#xff0c;点击左上角的File->Settings查看gradle存放路径 C:\Users\Administrator.gradle\wrapper\dists\gradle-5.4.1-all\3221gyojl5jsh0helicew7rwx 2、找到正在下载的gradle版本&#xff0c;Android Studio取消下载gradle&…

JVM的生命周期

1.加载&#xff08;Loading&#xff09;&#xff1a; 在加载阶段&#xff0c;JVM会找到并加载Java字节码文件。加载阶段分为三个步骤&#xff1a;通过类的全限定名找到对应的字节码文件&#xff0c;创建一个与该类相关的Class对象&#xff0c;将类的静态数据结构存储在方法区中…

uniapp中uview组件库的丰富Upload 上传上午用法

目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组&#xff0c;元素为对象)&#xff0c;显示预置的图片。其中元素的url属性为图片路径 <template>…

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…