看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# 跨线程调用控件

    在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应.  同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...

  2. document的createDocumentFragment()方法

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  3. [转]SecureCRT连接主机时，无法从键盘输入

    问题: SecureCRT连接主机时,无法从键盘输入 答案: 最近通过超级终端或者SecureCRT连接主机时,都只能读取设备信息,但是无法从键盘输入,进入不了配置状态,后来仔细检查了配置,居然是流控 ...

  4. 用maven搭建 testNG+PowerMock+Mockito测试框架

    单元测试是开发中必不可少的一部分,是产品代码的重要保证. Junit和testNG是当前最流行的测试框架,Junit是使用最广泛的测试框架,有兴趣的话自己baidu一下. testNG基于Junit和 ...

  5. HBase with MapReduce （SummaryToFile）

    上一篇文章是实现统计hbase单元值出现的个数,并将结果存放到hbase的表中,本文是将结果存放到hdfs上.其中的map实现与前文一直,连接:http://www.cnblogs.com/ljy20 ...

  6. follow me learning sqlserver transql

    create DATABASE 教务管理系统on (name=教务管理系统_data,filename='E:\sql\教务管理系统_data.mdf ',size=5mb,maxsize=20mb ...

  7. poj2240 floyd

    //Accepted 732 KB 782 ms //floyd应用 #include <cstdio> #include <cstring> #include <ios ...

  8. css3 弹框提示样式

    .common-dialog-box{ opacity: 0; filter: alpha(opacity=0); position: fixed; top: 0%; left: 50%; z-ind ...

  9. Java基础小总结

    1,Java事件处理机制 (1)三部分:事件源.事件(处理)对象.实现事件监听器: (2)事件处理程序:可以通过ActionEvent e,e.getSource确定是哪个事件触发了,然后通过类似JB ...

  10. cocos2d/x 自带字体（label）

    CCLabelTTF* label1 = CCLabelTTF::labelWithString("1掼蛋as", "AppleGothic", 15); la ...