CSS3简易表盘时钟
<!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简易表盘时钟的更多相关文章
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”
最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想 ...
- 网页计算器 && 简易网页时钟 && 倒计时时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css3 简易时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html+css3实现网页时钟
在网页上实现时钟功能,效果如右图所示: 运用到的关键技术有:css3中的旋转.旋转基点设置 旋转:transform:rotate(*deg) 旋转基点:transform-origin: x轴偏移 ...
- canvas绘制表盘时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- QT绘制简易表盘
1.简介 最近学习了一下QT,熟悉了一段时间后发现它的功能还是挺强大的,同时也比较方便用户上手去使用.现在就基于最近学习的内容,实现一个简易的带指针旋转功能的表盘.文中表盘的实现是基于QT的QPain ...
- css3简易实现图标动画由小到大逐个显现
在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...
- 基于FPGA的简易数字时钟
基于FPGA的可显示数字时钟,设计思路为自底向上,包含三个子模块:时钟模块,进制转换模块.led显示模块.所用到的FPGA晶振频率为50Mhz,首先利用它得到1hz的时钟然后然后得到时钟模块.把时钟模 ...
随机推荐
- MathType6.9按章节插入编号
先插入Chapter,然后修改break主要是该起始编号. 这样话会用一行红色红代码,选中,邮件字体,然后在格式里选择隐藏就好了,这个不能删除.
- 关于 feature team 的一些内容
矩阵式管理,是常见的经典管理架构.其最早起源于美国的航空航天部门,然后被美国人带到了日本,然后被日本人带到了台湾,然后台湾人带到大陆...矩阵管理最典型的特征是,组织架构按职能与专业划分,项目由跨越部 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- POJ1742Coins(并不理解是什么意思）
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 32309 Accepted: 10986 Descripti ...
- MySQL 代码开发注意事项----开发高性能的sql
序言 一个服务或者一个程序,由 程序+数据组成.在数据这块,计算机中IO是比CPU要慢得多,为了减少IO,减少CPU运算.我们第一时间会想到索引,但索引为啥会提高效率,因为可以减少IO,在查询的时候不 ...
- WebService的使用
转载至http://blog.csdn.net/yexuanbaby/article/details/9029605/ 第一次选择WebService,是为了替代数据库远程连接.我们都知道当SQL允许 ...
- 使用vlc播放器播放rtsp流视频
可参考: 使用vlc播放器做rtsp服务器 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器播放rt ...
- Java学习笔记15
do-while循环时while循环的变体语法如下:do{ // 循环体 语句(组);}while(循环继续条件); 如果循环中的语句至少需要执行一次,那么建议使用do-while循环. for循环 ...
- [C/C++] C/C++延伸学习系列之STL及Boost库概述
想要彻底搞懂C++是很难的,或许是不太现实的.但是不积硅步,无以至千里,所以抽时间来坚持学习一点,总结一点,多多锻炼几次,相信总有一天我们会变得"了解"C++. 1. C++标准库 ...
- AVAudioPlayer
AVAudioPlayer在AVFoundation框架下,所以我们要导入AVFoundation.framework. AVAudioPlayer类封装了播放单个声音的能力.播放器可以用NSURL或 ...