钟表练习 html+css实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} /* 设置表的样式 */
.clock{
width: 500px;
height: 500px;
/* background-color: #BBFFAA; */
margin: 0 auto;
margin-top: 100px;
/* 圆形 */
border-radius: 50%;
/* border:10px solid black; */
position: relative;
background-image: url(./img/13/bg.png);
background-size: cover;
} .clock > div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
} /* 设置时针 */
.hour-wrapper{ height: 70%;
width: 70%;
/* background-color: #BBFFAA; */
animation: run 43200s linear infinite; } .hour{
height: 50%;
width: 6px;
background-color: #000;
margin: 0 auto;
} .min-wrapper{
height: 80%;
width: 80%;
animation: run 3600s steps(60) infinite;
} .min{
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
} .sec-wrapper{
height: 90%;
width: 90%;
/* infinite 持续输出动画 */
animation: run 60s 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>
表盘图片链接：
钟表练习 html+css实现的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- JS+CSS 钟表
.<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title& ...
- 不用任何图片，只用简单的css写出唯美的钟表，就问你行吗？
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
- html,css,js实现的一个钟表
效果如图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS命名规范——BEM思想（非常赞的规范）
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...
- html/京东项目/京东网页高仿/js/jq/css/java web/
登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 太可爱了！CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
随机推荐
- C# 闭包类对弱引用的坑
闭包.弱引用的简单概念,大佬们描述的很多,有不了解的可以看看: 理解C#中的闭包 - 黑洞视界 - 博客园 (cnblogs.com) C#弱引用(WeakReference) - 简书 (jians ...
- 快速傅里叶变换FFT学习笔记
点值表示法 我们正常表示一个多项式的方式,形如 \(A(x)=a_0+a_1x+a_2x^2+...+a_nx^n\),这是正常人容易看懂的,但是,我们还有一种表示法. 我们知道,\(n+1\)个点可 ...
- 关于java中的super
首当其冲先说一下super的用途和含义.他是用于调用一些被重写的方法. 这里还可以复习一下子这个重写:重写是把新的方法放在被重写的方法前面.在被重写的子类中,优先调用重写后的方法.但是如果想要调用原本 ...
- 2023-05-10：给你一棵以 root 为根的二叉树和一个 head 为第一个节点的链表 如果在二叉树中，存在一条一直向下的路径 且每个点的数值恰好一一对应以 head 为首的链表中每个节点的值，
2023-05-10:给你一棵以 root 为根的二叉树和一个 head 为第一个节点的链表 如果在二叉树中,存在一条一直向下的路径 且每个点的数值恰好一一对应以 head 为首的链表中每个节点的值, ...
- 2022-07-24：以下go语言代码输出什么？A：[]int{}；B：[]int(nil)；C：panic；D：编译错误。 package main import ( “fmt“ ) f
2022-07-24:以下go语言代码输出什么?A:[]int{}:B:[]int(nil):C:panic:D:编译错误. package main import ( "fmt" ...
- 2022-07-17：1、2、3...n-1、n、n、n+1、n+2... 在这个序列中，只有一个数字有重复(n)。 这个序列是无序的，找到重复数字n。 这个序列是有序的，找到重复数字n。
2022-07-17:1.2.3-n-1.n.n.n+1.n+2- 在这个序列中,只有一个数字有重复(n). 这个序列是无序的,找到重复数字n. 这个序列是有序的,找到重复数字n. 答案2022-07 ...
- lec-6-Actor-Critic Algorithms
从PG→Policy evaluation 更多样本的均值+Causality+Baseline 减少variance 只要拟合估计Q.V:这需要两个网络 Value function fitting ...
- switch条件语句2
/*switch条件语句*/ #include<stdio.h> int main() { while (1) { int num; printf("请输入你的选择编号:\n&q ...
- Linux 目录 查看 压缩 编辑 命令
目录 一.文件目录 二.查看文件 三.压缩与解压 四.vim编辑 一.文件目录结构 文件类型: /root 管理员的家目录 /home 用户家目录 /bin 命令文件目录,存放命令,管理员和用户可 ...
- 各种版本的Linux 镜像下载网址
今天发现Linux 镜像下载网址感觉很不错,分享给有需要的小伙伴们 访问地址 Linux操作系统各版本ISO镜像下载(包括oracle linux\redhat\centos\ubuntu\debia ...