看CSS3妙味课堂中有一课是介绍如何做钟表界面，然后三根针都能随着时间转动，然后自己在那个简易的版本上做了一些进一部改进。

  1. 最关键的知识点应该是transform-origin这个样式，要选对旋转的中心点。分针秒针时针的旋转中心点应该是针的底部中间位置
  2. 这个实例还是让我第一次见到把<style>设置了id，然后写进js里去操作的，因为表面的各种小时，秒的刻度的制作，需要用循环来写，直接写css样式里是不现实的。
  3. 另外就是要把setInterval和transform:rotate结合起来使用，让秒钟动起来。
  4. 不要忘了，在秒钟动的同时，分针和时针都在一直变化着，所以要将每一秒后三根针的位置都要同时计算，按照比例来计算分针是时针的角度

<style id="css">
ul{
;
list-style: none;
}
#cover{
width: 400px;
height: 400px;
%;
border: 3px solid #504f4c;
position: relative;
background: #f1f1f3;
}
#center,#icon,#icon_inner,#center_inner{
%;
position: absolute;
;
margin: auto;
}
#icon{
width: 26px;
height: 26px;
background: #0677bf;
}
#center{
width: 8px;
height: 8px;
background: #b4bea5;
;
}
#icon_inner{
width: 12px;
height: 12px;
background: #b94130;
}
#center_inner{
width: 4px;
height: 4px;
background: #b94130;
;
}
#hour{
width: 6px;
height: 105px;
position: absolute;
left: 197px;
bottom: 208px;
background:#0677bf;
border-radius: 3px;
transform-origin: 3px 110px;
;
}
#minute{
width: 6px;
height: 190px;
position: absolute;
left: 197px;
bottom: 205px;
background:#0677bf;
border-radius: 3px;
transform-origin: 3px 195px;
;
}
#second{
width: 3px;
height: 70px;
position: absolute;
left: 58.5px;
bottom: 45px;
background:#b94130;
border-radius: 2px;
transform-origin: 1.5px 55px;
}
#list_big li{
width: 1px;
height: 15px;
position: absolute;
left: 199px;
bottom: 380px;
background: #171717;
transform-origin: 1px 195px;
}
#list_small li{
width: 4px;
height: 40px;
border-radius: 2px;
position: absolute;
left: 198px;
bottom: 335px;
background: #171717;
transform-origin: 2px 175px;
}
#list_big li:nth-of-type(5n+1){
width: 4px;
border-radius: 2px;
}
#number li{
position: absolute;
height: 40px;
line-height: 40px;
%;
bottom: 330px;
font-family: "arial narrow";
font-size: 50px;
%);
% 170px;
}
#mark{
width: 100px;
position: absolute;
top: 100px;
%;
%);
font-family: arial;
;
}
#mark_top{
position: absolute;
text-align: center;
%;
%);
font-size: 18px;
}
#mark_bottom{
position: absolute;
top: 20px;
%;
%);
text-align: center;
font-size: 8px;
}
#cover_inner{
width: 120px;
height: 120px;
%;
background: #e0dfdb;
position: absolute;
bottom: 50px;
%;
%);
}
#cover_inner li{
width: 2px;
height: 12px;
border-radius: 1px;
position: absolute;
left: 59px;
bottom: 103px;
background: #171717;
transform-origin: 1px 55px;
}
#cover_inner li:nth-of-type(3n+1){
width: 4px;
border-radius: 2px;
}
</style>
<script>
window.onload=function(){
var oListB = document.getElementById('list_big');
var oListS = document.getElementById('list_small');
var oListI = document.getElementById('list_inner');
var oNum = document.getElementById('number');
var oCss = document.getElementById('css');
var listBHtml = '';
var listSHtml = '';
var listIHtml = '';
var numHtml = '';
 
var oCssHtml = oCss.innerHTML;
 
; i++) {
listBHtml += '<li></li>';
+'deg);}'
}
 
; i++) {
listIHtml += '<li></li>';
) +'deg);}'
}
 
; i++) {
listSHtml += '<li></li>';
) +'deg);}'
}
 
; i++) {
){
continue;
}
) +'deg);}'
}
oListB.innerHTML = listBHtml;
oListS.innerHTML = listSHtml;
oListI.innerHTML = listIHtml;
oCss.innerHTML = oCssHtml;
 
var oSec = document.getElementById('second');
var oMin = document.getElementById('minute');
var oHour = document.getElementById('hour');
 
getTime();
 
);
 
function getTime(){
var oDate = new Date();
var iSec = oDate.getSeconds();
;
;
 
+'deg)';
+'deg)';
+'deg)';
}
};
</script>
</head>
<body>
<div id="cover">
<span id="icon"></span>
<span id="center"></span>
<span id="hour"></span>
<span id="minute"></span>
<div id="mark">
<span id="mark_top">N&nbspO&nbspM&nbspO&nbspS</span>
<span id="mark_bottom">G&nbspL&nbspA&nbspS&nbspH&nbspU&nbspT&nbspT&nbspE</span>
</div>
<div id="cover_inner">
<ul id="list_inner">
</ul>
<span id="icon_inner"></span>
<span id="center_inner"></span>
<span id="second"></span>
</div>
<ul id="list_big">
</ul>
<ul id="list_small">
</ul>
<ul id="number">
</li>
</li>
</li>
<li></li>
</li>
</li>
</ul>
</div>
</body>
</html>

【学+原】CSS3的2D动画 ——仿NOMOS手表的更多相关文章

  1. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  2. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

  3. 【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下.md

    之前看到智能社主页的那个骰子样式的钟表,最近研究了一下,虽然没有仔细看他是怎么做的,但是学了css3的动画之后想自己尝试着写一下,用到的原理可能和智能社网站的不太一样,我自己主要用到了css3和js. ...

  4. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  5. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  6. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  7. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  8. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

  9. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. Java：多线程<二> 同步

    由于多线程的访问出现延迟和线程的随机性,在使用多线程时往往会伴随安全性的问题,这些问题一旦出现将会是非常严重的.为了解决这种安全性问题,synchronized出现了. synchronized用法一 ...

  2. c#网络通信框架networkcomms内核解析 序言

    NetworkComms网络通信框架序言 networkcomms是我遇到的写的最优美的代码,很喜欢,推荐给大家:) 基于networkcomms2.3.1开源版本( gplv3)协议,写了一些文章, ...

  3. CentOs6.5下独立安装Nginx篇

    一.检查系统是否安装了Nginx [root@localhost local]# find -name nginx [root@localhost local]# (如果已经安装了nginx就卸载掉原 ...

  4. Zabbix点滴

    [ZABBIX需试验的项] 1. 手工设置ITEM, 采用descr为依据值,用SNMP取流量 2. 通过aggregate item类型,设置取虚拟机数量的值(描绘出虚拟机的增长与下降曲线) [20 ...

  5. oracle 11g 空表也导出

    查询空表 并导出修改空表语句 select 'alter table '||table_name||' allocate extent;' from user_tables where num_row ...

  6. 在Ubuntu上安装JDK、Ant、Jmeter和Jenkins

    一.前期准备 1. 在win7下载VMware.Ubuntu(用迅雷下比较快) 2. 安装完VMware后新建虚拟机,选择iso: 3. 具体配置参考如下,至此Ubantu安装完成 二.在Ubuntu ...

  7. iOS移动下上传图片失败解决 （上传多图，带其他参数）

    项目中有一个主要的功能,就是上传图片,结结果移动真的是很奇怪,WiFi,联通,电信都没有问题的情况下,居然在移动下不行,真的是很头疼.不过好在最后是解决了 项目的网络请求我是采用ASIHttpRequ ...

  8. 2014年5月份第2周51Aspx源码发布详情

    Reapter手写分页控件源码  2014-5-12 [VS2010]源码描述:实现repeater控件分页,方便好用,界面设计也很漂亮.数据库是Access,可直接运行.入口是RepeaterTes ...

  9. <我是一只IT小小鸟>读书笔记

    这篇文章给我感触最深的是开篇蒋宇东所出的一道选择题--今后的发展选择有三条:A.做一辈子IT民工:B.将大学时欠下来的债补上:C.改行. 他们用自己的成长故事告诉师弟师妹们:一定要弄清楚上大学首要的任 ...

  10. GCD下的几种实现同步的方式

    GCD多线程下,实现线程同步的方式有如下几种: 1.串行队列 2.并行队列 3.分组 4.信号量 实例: 去网上获取一张图片并展示在视图上. 实现这个需求,可以拆分成两个任务,一个是去网上获取图片,一 ...