css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理
众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形。
为了使指针转动起来,我们需要使用-webkit-transform-origin:center100px;来设置我们的旋转基点。然后利用-webkit-transform:rotate(0);让我们的li旋转相应的角度形成相应的刻度。
设计好刻度之后,需要涉及一个nth-of-type()的选择器,用来规定其属于父元素的第几个子元素。
在圆形时钟的正中心我们要设一个divicon用于指针的连接点。
然后我们利用js获取div之后对表盘的刻度进行渲染。
最后开一个定时器,每隔一秒执行一次函数。
使用css3绘制出圆形动态时钟的代码
钟表
#wrap{width:200px;height:200px;border:2pxsolid#000;margin:100pxauto;border-radius:50%;position:relative;}
#wrapul{margin:0;padding:0;height:200px;position:relative;list-style:none;}
#wrapulli{width:2px;height:6px;background:#000;position:absolute;left:99px;top:0;-webkit-transform-origin:center100px;}
/*#wrapulli:nth-of-type(1){-webkit-transform:rotate(0);}
#wrapulli:nth-of-type(2){-webkit-transform:rotate(6deg);}
#wrapulli:nth-of-type(3){-webkit-transform:rotate(12deg);}
#wrapulli:nth-of-type(4){-webkit-transform:rotate(18deg);}
#wrapulli:nth-of-type(5){-webkit-transform:rotate(24deg);}
#wrapulli:nth-of-type(6){-webkit-transform:rotate(30deg);}
#wrapulli:nth-of-type(7){-webkit-transform:rotate(36deg);}
#wrapulli:nth-of-type(8){-webkit-transform:rotate(42deg);}*/
#wrapulli:nth-of-type(5n+1){height:12px;}
#hour{width:6px;height:45px;background:#000;position:absolute;left:97px;top:55px;-webkit-transform-origin:bottom;}
#min{width:4px;height:65px;background:#999;position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom;}
#sec{width:2px;height:80px;background:red;position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom;}
.icon{width:20px;height:20px;background:#000;border-radius:50%;position:absolute;left:90px;top:90px;}
css画钟表_如何使用css3绘制出圆形动态时钟相关推荐
- css画钟表_纯Shading Language绘制HTML5时钟
今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS ...
- css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- python的turtle怎么画曲线_利用 turtle库绘制简单图形
turtle库是python的基础绘图库,这个库被介绍为一个最常用的用来介绍编程知识的方法库,其主要是用于程序设计入门,是标准库之一,利用turtle可以制作很多复杂的绘图. turtle名称含义为& ...
- html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
乾坤八卦图衍生自中国古代的<河图>与<洛书>,伏羲根据燧人氏造设的这两幅星图所作.其形状经过抽象以后,成为对称感相当强的几何图形,无论是黑白两色还是形状,都非常地平衡和稳重. ...
- osg画线_在OpenSceneGraph中绘制OpenCascade的曲面
在OpenSceneGraph中绘制OpenCascade的曲面 Draw OpenCascade Geometry Surfaces in OpenSceneGraph 摘要Abstract:本文对 ...
- python画三维立体图-Python 竟能绘制出如此酷炫的三维图
原标题:Python 竟能绘制出如此酷炫的三维图 通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维 ...
- css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- css画钟表_CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
- css线条伸缩_伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...
最新文章
- 纪念机器翻译概念的诞生:重新认识瓦伦·韦弗先生
- jmeter学习笔记4 数据库插入
- JSON Pointer
- Java中特质模式的定义
- java ftp获取文件夹大小,java 用FTPClient 下载文件时不显示总大小?解决方案
- JSTL之数字、日期格式化fmt:formatNumber/、fmt:formatDate/
- c/c++标准库中的文件操作总结
- windows--bat--删除当前脚本del %0
- 使用Nativefier将web页面打包为桌面应用
- ijkplayer android端jni层调试
- 模糊C均值聚类算法(原理+Matlab代码)
- 2017CCCC天梯赛决赛 赛后总结
- 浅谈推荐系统之内容推荐
- 3个自由度搬运机械手设计【CAD图纸+毕业论文+电路图+梯形图+接线图】
- 手势操作TouchAction
- 什么是IP地址冲突?如何解决IP地址冲突?
- [LoadRunner]录制启动时报“The JVM could not be started……”错误解决方案
- Filter 过滤器拦截路径配置
- 修改plot的背景颜色[matplotlib][axes][facecolor]
- SEO常用MATE整理