CSS时钟案例

文章目录

  • 1. 演示效果
  • 2. 分析思路
  • 3. 代码实现

1. 演示效果

QQ录屏20240318115401 -original-original

2. 分析思路

  • 背景是表盘,不用自己制作
  • 然后用CSS的定位做时针,分针和秒针
  • 黑点用伪元素::after生成
  • 转动用animation实现

3. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>02-时钟效果</title><style>.box {display: flex;justify-content: center;align-items: center;width: 350px;height: 380px;background: rgb(205, 205, 205);margin: 0 auto;border-radius: 10px;}.clock {position: relative;width: 300px;height: 300px;background: #fff url("./img/ios_clock.svg") no-repeat center;background-size: 88%;border-radius: 50%;}/* 中间黑点 */.clock::after {position: absolute;top: 50%;left: 50%;content: "";width: 15px;height: 15px;background: #000;border-radius: 50%;/* 向左上移动自身的50% */transform: translate(-50%, -50%);z-index: 10;}/* 时针 */.hours {position: absolute;top: 30%;left: 48.5%;width: 3%;height: 20%;background: #000;/* 沿底部旋转 */transform-origin: 50% 100%;animation: myRotate 43200s infinite steps(60);}/* 分针 */.minutes {position: absolute;top: 13%;left: 49%;width: 2%;height: 37%;background: #000;/* 沿底部旋转 */transform-origin: 50% 100%;animation: myRotate 3600s infinite steps(60);}/* 秒针 */.seconds {position: absolute;top: 16.5%;left: 49.5%;width: 1%;height: 40%;background: #f00;/* 沿底部旋转 */transform-origin: 50% 84%;/* 添加动画 *//* animation: myRotate 60s infinite linear; */animation: myRotate 60s infinite steps(60);}/* 定义动画 */@keyframes myRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style></head><body><div class="box"><div class="clock"><div class="hours"></div><div class="minutes"></div><div class="seconds"></div></div></div></body>
</html>

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

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

相关文章

Java学习笔记 | JavaSE基础语法05 | 方法

文章目录 0.前言1. 方法概述2. 方法的定义和调用2.1 无参数方法定义和调用2.2 带参数方法定义和调用1 带参数方法定义和调用2 形参和实参3 带参数方法练习 2.3 带返回值方法的定义和调用1 带返回值方法定义和调用2 带返回值方法练习13 带返回值方法练习24 带返回值方法练习3 3.…

vim | vim的快捷命令行

快捷进入shell界面 -> :nnoremap <F8> :sh<CR> -> 绑定到了F8 :nnoremap <F8> :sh<CR> 快捷执行 -> :nnoremap <F5> :wa<CR>:!g % -o a.out && ./a.out<CR> -> 绑定到了F5 :nnoremap <F5> :wa<CR>…

【Prometheus】查询数据接口

文章目录 1. 前言1.1. API终端1.2. API状态码说明1.3. API请求返回的格式均使用以下的 JSON 格式2. API接口文档2.1. 查询时间点结果2.1.1. 请求类型2.1.2. URL2.1.3. 请求参数2.1.4. 返回2.1.5. 实例2.2. 查询时间范围结果2.2.1. 请求类型2.2.2. URL2.2.3. 请求参数2.2.3.1. s…

Python学习从0到1 day18 Python可视化基础综合案例 1.折线图

我默记这段路的酸楚&#xff0c;等来年春暖花开之时再赏心阅读 —— 24.3.24 python基础综合案例 数据可视化 — 折线图可视化 一、折线图案例 1.json数据格式 2.pyecharts模块介绍 3.pyecharts快速入门 4.数据处理 5.创建折线图 1.json数据格式 1.什么是json 2.掌握如何使用js…

SqlServer找不到SQL Server Configuration Manager(配置管理)

1、Win键 R &#xff0c;输入 compmgmt.msc 2、找到Sql Server配置管理器

代码随想录-动态规划15(392. 判断子序列、115. 不同的子序列)

392. 判断子序列 class Solution { public:bool isSubsequence(string s, string t) {int m s.size();int n t.size();vector<vector<int>> dp(m1, vector<int>(n1));for (int i1; i<m; i)for (int j1; j<n; j){if (s[i-1]t[j-1]) dp[i][j] dp[i-1…

函数模板及注意事项

一、函数模板 C另一种编程思想称为泛型编程&#xff0c;主要利用的技术就是模板 C提供两种模板机制&#xff1a;函数模板和类模板 函数模板作用&#xff1a; 建立一个通用函数&#xff0c;其函数返回值类型和形参类型可以不具体制定&#xff0c;用一个虚拟的类型来代表。 语…

nginx localtion 匹配规则

1、语法规则 语法规则&#xff1a;location[|~|^~*|^~]/uri/{… } 表示精确匹配,这个优先级也是最高的 ^~ 表示 uri 以某个常规字符串开头&#xff0c;理解为匹配 url 路径即可。 nginx 不对 url 做编码&#xff0c;因此请求为 /image/20%/aa&#xff0c;可以被规则^~ /imag…

演讲嘉宾公布 | 智能家居与会议系统专题论坛将于3月28日举办

一、智能家居与会议系统专题论坛 智能家居通过集成先进的技术和设备&#xff0c;为人们提供了更安全、舒适、高效、便捷且多彩的生活体验。智能会议系统它通过先进的技术手段&#xff0c;提高了会议效率&#xff0c;降低了沟通成本&#xff0c;提升了参会者的会议体验。对于现代…

Deconstructing Denoising Diffusion Models for Self-Supervised Learning

开头说点题外话&#xff1a;这篇可谓是大咖云集啊&#xff0c;刘壮、谢赛宁、何凯明这些耳熟能详的名字&#xff0c;并且这篇论文一些人也觉得分析特别到位&#xff0c;不愧是大佬视角&#xff0c;配得上“解构”两个字&#xff1b;很巧的是&#xff0c;本科阶段的团队导师也是…

Web框架开发-Ajax

一、 Ajax准备知识:json 1、json(Javascript Obiect Notation,JS对象标记)是一种轻量级的数据交换格式 1 2 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。…

go 基础中的一些坑

类型转换 在 go 语言中&#xff0c;类型转换是显式的&#xff0c;不会自动转换 go 复制代码 func main(){ i : 100 var f float64 f float64(i) } string 转换成 int 需要借助 strconv 包 使用 strconv.Atoi 函数将 string 转换成 int&#xff0c;转换后它会输出两个值&…

计算机组成原理-5-输入输出系统

5. 输入输出系统 文章目录 5. 输入输出系统5.1 概述5.1.1 I/O系统的发展概况5.1.2 I/O系统的组成5.1.3 I/O设备与主机的连接5.1.4 I/O设备与主机传送信息的控制方式 5.2 I/O设备5.3 I/O接口5.4 控制方式5.4.1 程序查询方式5.4.2 程序中断方式5.4.3 DMA方式5.4.4 程序中断方式与…

vue 控制窗口禁止缩放,已解决

注意&#xff1a;不是浏览器窗口禁止缩放 1.vue框架中&#xff0c;index.html文件head标签中加上内容 <meta name"viewport" content"widthdevice-width, initial-scale1, maximum-scale1, user-scalable0"><script>document.addEventListen…

RabbitMQ 01

01.定义 02.功能

apifox创建接口含中文字符报错的两种解决方案

针对apifox的含中文报错解决方法&#xff1a; 方法一&#xff1a;创建相应接口后&#xff0c;在设置中URL自动编码为WHATING。 方法二&#xff1a;直接将浏览器的url复制到apifox中&#xff0c;浏览器会自动解析配置中文转换路径。

springboot297毕业生实习与就业管理系统的设计与实现

毕业生实习与就业管理系统 摘 要 使用旧方法对毕业生实习与就业管理系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在毕业生实习与就业管理系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数…

ADS版图优化方法---使用EM-Cosimulation对版图进行OPTIM

ADS版图优化方法—使用EM-Cosimulation对版图进行OPTIM 一般来说&#xff0c;对原理图进行OPTIM优化的方法大伙用的都比较6了&#xff0c;跑起来也非常快。但是得到版图又可能和原理图的结果差的非常大&#xff0c;为了优化版图又不得不重新对原理图的参数进行调谐优化&#x…

这个国产原型设计工具,建议PM新人一定要用!

Hello小伙伴们&#xff01;我是榛妮&#xff0c;原BAT大厂女产品经理一枚&#xff0c;目前在香港创业。 一转眼&#xff0c;做产品经理已经8年&#xff0c;想想入行时的种种往事&#xff08;尴尬情况&#xff09;&#xff0c;至今仍然历历在目。 说起刚入行时遇到的那些问题&a…

qt拖拽事件重写

1.qt中的拖拽事件步骤 1设置接受拖拽 2重写事件就可以了 3其他的控件如何要可以套模板 2.例子 #include <QGroupBox> #include <QObject> #include <QDragEnterEvent> #include <QFileInfo> #include <QMimeData>//重写&#xff0c;指出拖拽指…