<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css3时钟</title>

<style>

.box{

width: 300px;

height: 300px;

border-radius: 50%;

border: 5px solid #ccc;

margin: 100px auto;

position: relative;

}

.kedu{

width: 300px;

height: 300px;

border-radius: 50%;

position: relative;

overflow: hidden;

}

.kedu div{

height: 300px;

position: absolute;

left: 50%;

}

.kedu div:nth-child(1){

width: 6px;

background: #333;

margin-left: -3px;

}

.kedu div:nth-child(2){

width: 2px;

background: #666;

margin-left: -3px;

transform: rotate(30deg);

}

.kedu div:nth-child(3){

width: 2px;

background: #666;

margin-left: -3px;

transform: rotate(60deg);

}

.kedu div:nth-child(4){

width: 6px;

background: #333;

margin-left: -3px;

transform: rotate(90deg);

}

.kedu div:nth-child(5){

width: 2px;

background: #666;

margin-left: -3px;

transform: rotate(120deg);

}

.kedu div:nth-child(6){

width: 2px;

background: #666;

margin-left: -3px;

transform: rotate(150deg);

}

.disc{

width: 20px;

height: 20px;

border-radius: 50%;

background: #000;

position: absolute;

top: 50%;

left: 50%;

margin-left: -10px;

margin-top: -10px;

z-index: 2;

}

.middisc{

width: 260px;

height: 260px;

border-radius: 50%;

background: #fff;

position: absolute;

top: 50%;

left: 50%;

margin-left: -130px;

margin-top: -130px;

}

.hour{

width: 6px;

height: 60px;

background: #000;

position: absolute;

top: -50px;

left: 50%;

margin-left: -3px;

transform-origin: bottom center;

animation: move 43200s steps(60) 0s infinite;

}

.minu{

width: 4px;

height: 80px;

background: green;

position: absolute;

top: -70px;

left: 50%;

margin-left: -2px;

transform-origin: bottom center;

animation: move 3600s steps(60) 0s infinite;

}

.second{

width: 2px;

height: 100px;

background: #f00;

position: absolute;

top: -90px;

left: 50%;

margin-left: -1px;

transform-origin: bottom center;

-webkit-animation: move 60s steps(60) infinite;

}

.cover{

width: 20px;

height: 20px;

border-radius: 50%;

background: #000;

position: absolute;

}

@keyframes move{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

}

</style>

</head>

<body>

<div class="box">

<div class="kedu">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="disc">

<div class="hour"></div>

<div class="minu"></div>

<div class="second"></div>

<div class="cover"></div>

</div>

<div class="middisc">

</div>

</div>

</body>

</html>

有大量web前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟

CSS3简易表盘时钟的更多相关文章

  1. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  2. iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”

    最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想 ...

  3. 网页计算器 && 简易网页时钟 && 倒计时时钟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css3 简易时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html+css3实现网页时钟

    在网页上实现时钟功能,效果如右图所示: 运用到的关键技术有:css3中的旋转.旋转基点设置 旋转:transform:rotate(*deg) 旋转基点:transform-origin: x轴偏移 ...

  6. canvas绘制表盘时钟

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. QT绘制简易表盘

    1.简介 最近学习了一下QT,熟悉了一段时间后发现它的功能还是挺强大的,同时也比较方便用户上手去使用.现在就基于最近学习的内容,实现一个简易的带指针旋转功能的表盘.文中表盘的实现是基于QT的QPain ...

  8. css3简易实现图标动画由小到大逐个显现

    在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...

  9. 基于FPGA的简易数字时钟

    基于FPGA的可显示数字时钟,设计思路为自底向上,包含三个子模块:时钟模块,进制转换模块.led显示模块.所用到的FPGA晶振频率为50Mhz,首先利用它得到1hz的时钟然后然后得到时钟模块.把时钟模 ...

随机推荐

  1. BZOJ 4390: [Usaco2015 dec]Max Flow

    4390: [Usaco2015 dec]Max Flow Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 177  Solved: 113[Submi ...

  2. 配置LVS + Keepalived高可用负载均衡集群之图文教程

    负载均衡系统可以选用LVS方案,而为避免Director Server单点故障引起系统崩溃,我们可以选用LVS+Keepalived组合保证高可用性.  重点:每个节点时间都同步哈! C++代码 [r ...

  3. linux命令汇总

    GPU使用率 使用率查看,GPU-Util $ nvidia-smi 实时查看 $ watch [options] command 最常用的参数是 -n, 后面指定是每多少秒来执行一次命令. 监视显存 ...

  4. Android studio 软件板块

  5. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  6. js笔记

    1.克隆对象 克隆数组: var country=['中国','美国']; var copyCountry=country.slice(0); 克隆对象: var people={sex:'man', ...

  7. Node.js API 初解读（一）

    Node.JS API 初解读 Version: NodeJs v6.2.0 一. Assert 1.简介 Assert模块主要用于断言.如果表达式不符合预期,就抛出一个错误. 该模块用于编写程序的单 ...

  8. 如何修改geditor的配置文件 -好像geditor没有文本格式的配置文件? 要使用dconf-editor来配置- geditor自己配置编码格式

    好像geditor没有文本格式的配置文件? 好像是通过一个程序, 叫 dconf-editor 来配置geditor的? 以前是通过gconf-editor来配置的, 但是gconf-editor的配 ...

  9. FSM（状态机）、HFSM（分层状态机）、BT（行为树）的区别

    游戏人工智能AI中最常听见的就是这三个词拉: FSM 这个不用说拉,百度一大堆解释, 简单将就是将游戏AI行为分为一个一个的状态,状态与状态之间的过渡通过事件的触发来形成. 比如士兵的行为有“巡逻”, ...

  10. IOS与Android APP界面设计规范要点

    IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...