看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. Effective Java阅读笔记——引言

    “我很希望10年前就拥有这本书.可能有人认为我不需要任何Java方面的书籍,但是我需要这本书.” ——Java之父 James Gosling 在图书馆找到这本java著作时,首先看到了这句话.   ...

  2. adobe cc 2015安装步骤

  3. Oracle 差异增量和累计增量备份

    网址: http://www.eygle.com/digest/2009/04/oracle_rman_incremental_backup.html 在rman增量备份中,有差异增量和累积增量的概念 ...

  4. jQuery对input select操作小结

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...

  5. w3school一个学习编程的好地方！

    http://www.w3school.com.cn/index.html 每天过来学习几篇.

  6. PR和VV的分类与区别

    Adobe Premiere是一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性 ...

  7. linux kernel 如何处理大小端

    暂时在用MPC8309,不太清楚大小端内核是什么时候给转的. 今天看了关于readl和writel具体实现的文章 今天就主要来分析下readl/writel如何实现高效的数据swap和寄存器读写.我们 ...

  8. 关于jsonp跨域过程中 cookie中的值一直为null的原因

    今天技术交流群里的小伙伴一直被一个问题而困扰,就是写入cookie里面的值 再次进行请求时 cookie 就为空了 他被问题纠结了一天  我也好奇了一天 终于在快下班的时候 他解决掉了 下面我来收一个 ...

  9. CSS简单布局总结

    display  block       块级元素,占据一行 none       隐藏 inline      允许同一行显示,但不再有宽和高 inline-block   允许在一行的块级元素,可 ...

  10. 【Python】实现5!+4!+3!+2!+1!

    #!/usr/bin/env python #-*- coding:utf-8 -*- def factorial_add(n): empty_list=[] #定义一个空列表 for i in ma ...