看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. C# tabconctrol切换事件

    tabconctrol没有click事件,切换page时,调用SelectedIndexChanged事件: private void tabControl1_SelectedIndexChanged ...

  2. [转]Jenkins Xcode打包ipa

    本地打包. 如果Mac 上没有安装brew.先安装:ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/ins ...

  3. Ionic 2.0.0-rc.1 发布，HTML5 移动应用框架

    Ionic 2.0.0-rc.1 发布了,Ionic Framework 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架.本次更新内容如下: Bug 修 ...

  4. 5、Linux下面桌面的安装

    搭建本地yum仓库的方法 http://www.cnblogs.com/lql123/p/5952788.html 1.yum grouplist        (列出yum仓库里的软件组列表) .y ...

  5. Python显示函数调用堆栈

    网上找到如下几个思路: 1.用inspect模块 2.用sys._getframe模块 3.用sys.exc_traceback,先抛一个异常,然后抓出traceback #!/usr/bin/env ...

  6. [蟒蛇菜谱] Python方便使用的级联进度信息

    class StepedProgress: '''方便显示进度的级联进度信息. ''' def __init__(self, stockPercent=[1], parentProgress=None ...

  7. BZOJ 1969 树链剖分+Tarjan缩点

    发现自己Tarjan的板子有错误.发现可以用Map直接删去边,Get. 听说std是双连通.LCA.并查集.离线思想.用BIT维护dfs序和并查集维护LCA的动态缩点的好题 #include < ...

  8. LayaAir引擎——（一）

    LayaAir是LayaBox推出的Html5游戏引擎,支持 ActionScript3.TypeScript.JavaScript,开源,并且商用免费.   LayaAir IDE 是一款使用Lay ...

  9. NPOI设置Excel保护

    有时,我们可能需要某些单元格只读,如在做模板时,模板中的数据是不能随意让别人改的.在Excel中,可以通过“审阅->保护工作表”来完成,如下图:  那么,在NPOI中有没有办法通过编码的方式达到 ...

  10. Javascript中call函数和apply函数的使用

    Javascript 中call函数和apply的使用: Javascript中的call函数和apply函数是对执行上下文进行切换,是将一个函数从当前执行的上下文切换到另一个对象中执行,例如: so ...