css3获取当前时间并显示,CSS3实现时间表

一直想学CSS3，今天别的论坛看到的例子，挺好，mark起来以后自己看。

title

*{margin:0;padding:0}

#box{

width:300px;

height:300px;

border:1px solid #000;

border-radius:50%;

position:absolute;

top:100px;left:300px;

box-shadow:1px 1px 5px #000;

cursor:pointer;

}

.hour{

width:14px;

height:80px;

background:#000;

position:absolute;

top:50%;left:50%;

margin:-80px 0 0 -7px;

transform-origin:center bottom;

}

.min{

width:14px;

height:100px;

background:#000;

position:absolute;

top:50%;left:50%;

margin:-100px 0px 0px -7px;

border-radius:50% 50% 0 0;

transform-origin:center bottom;

}

.sec{

width:4px;

height:120px;

background:red;

position:absolute;

top:50%;left:50%;

margin:-120px 0 0 -2px;

transform-origin:center bottom;

}

.cap{

width:20px;

height:20px;

background:#999;

border-radius:50%;

position:absolute;

top:50%;left:50%;

margin:-10px 0 0 -10px;

}

.scale{

width:4px;

height:10px;

background:#000;

position:absolute;

left:50%;

margin-left:-2px;

display:block;

-webkit-transform:rotate(45deg);

transform-origin:center 150px;

}

.bs{

width:6px;height:18px;

background:#000;

position:absolute;

left:50%;

margin-left:-3px;

display:block;

-webkit-transform:rotate(45deg);

transform-origin:center 150px;

}

.bs em{

width:50px;

text-align:center;

margin:17px 0;

position:absolute;

top:0px;left:50%;

margin-left:-25px;

font-style:normal

}

window.onload = function(){

var oBox = document.getElementById('box');

var oH = document.querySelector('.hour');

var oM = document.querySelector('.min');

var oS = document.querySelector('.sec');

var N = 60;

for(var i=0;i

var oSpan = document.createElement('span');

if(i%5==0){

oSpan.className = 'bs';

var num = i/5==0 ? 12:i/5;

oSpan.innerHTML = ''+num+'';

oSpan.style.transform = 'rotate('+(i*N)+'deg)';

oSpan.children[0].style.transform = 'rotate('+ -i*6 +'deg)';

}else{

oSpan.className = 'scale';

}

oBox.appendChild(oSpan);

oSpan.style.transform = 'rotate('+6*i+'deg)';

}

function clock(){

var oDate = new Date();

var h = oDate.getHours();

var m = oDate.getMinutes()+1;

var s = oDate.getSeconds();

var ms= oDate.getMilliseconds();

oH.style.transform = 'rotate('+(h*30+m/60*30)+'deg)';

oM.style.transform = 'rotate('+(m*6+s/60*6)+'deg)';

oS.style.transform = 'rotate('+(s*6+ms/1000*6)+'deg)';

}

clock();

setInterval(clock,30);

}

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

CSS3 border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

.NET Core RC2/RTM 明确了时间表

.NET Core 经过了将近2年的开发,去年12月份发布的RC1版本,明确来说那只是一个beta版本,自从RC1发布以来,看到github里的RC2分支,整个工具链都发生了很大的变化,大家都在焦急的 ...

CSS3 3D立方体效果－transform也不过如此

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

三分钟学会用 js + css3 打造酷炫3D相册

之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

使用CSS3实现一个3D相册

CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

Web大前端时代之：HTML5+CSS3入门系列

准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

前端制作动画的几种方式(css3，js)

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

随机推荐

子元素的div不继承父元素的透明度

问题一: 如何让logo部变成这样: 步骤一:先收一个大的div,上面logo+nav再一个div,下面是三个div横排着: 步骤二:最主要的是如何让上面的部分变暗,而logo的颜色不变暗? 答案:在 ...

Combox选中项注意事项

一般我们选中某个combox的下拉框会用如下方式: 1.combox.SelectedIndex=下拉框下标,如0是选中第一个.-1是不选中任何项等等: 2.combox.SelectedItem=某 ...

自绘ListBox的两种效果

本文利用Listbox自绘实现了两种特殊效果(见图),左边的风格是自己突然灵感触发想到的,右边的风格来自＂C++ Builder 研究＂的一个帖子,老妖用BCB实现了,这里则用Delphi实现它. 演 ...

使用gulp实现文件压缩及浏览器热加载

一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要 ...

【原】以setTimeout来聊聊Event Loop

平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setT ...

Nodejs【单机】多进程模式集群

Nodejs[单机]多进程模式集群实例: 1.安装:npm install -s cluster 2.服务代码: var debug = require('debug'); var express = ...

Python+Selenium学习--窗口切换及操作元素

场景 有时候我们在测试一个web 应用时会出现多个浏览器窗口的情况,在selenium1.0 中这个问题比较难处理.webdriver 提供了相关相方法可以很轻松的在多个窗口之间切换并操作不同窗口上的 ...

版本管理工具git与svn简介

版本管理工具 版本管理工具简介 常见版本管理工具 cvs(Concurrent Versions System) vss(Visual SourceSafe) svn 常用的版本管理工具 git 流行 ...

bata5

目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...