看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. bugfree安装

    1.下载xampp文件:xampp-linux-x64-5.5.30-3-installer.run 2.安装此文件,用root账号安装,安装命令:./xampp-linux-x64-5.5.30-3 ...

  2. apache开启.htaccess

    1 . 如何让的本地APACHE开启.htaccess 如何让的本地APACHE开启.htaccess呢?其实只要简朴修改一下apache的httpd.conf设置就让APACHE.htaccess了 ...

  3. 使用ASP.NET 上传文件 三种类型判断方法(后缀,MIME,数据流)

    #region 一. 安全性比较低,把文本文件1.txt改成1.jpg照样可以上传,但其实现方法容易理解,实现也简单,所以网上很多还是采取这种方法. Boolean fileOk = false; s ...

  4. [vijos P1391] 想越狱的小杉

    考前最后一题,竟然是第一次码SPFA,虽然这个算法早有耳闻,甚至在闻所未闻之前自己有过一个类似的想法,说白了就是广搜啊,但是敲起来还是第一次啊,而且这还不是真正意义上的SPFA. 完全按照自己想法来码 ...

  5. Android - 定时服务 - Timer

    注:在项目中,有时可能会有一些定时执行的任务,这时,一般都会在一个service中写一个定时器. 例: Service类: import java.util.Timer; import java.ut ...

  6. enmo_day_08

    性能监视 管理内存组件 自动内存管理(AMM) : 指定分配给实例的总内存(SGA, PGA) 自动共享内存管理(ASMM) : 指定SGA, 管理分配给共享池, java池, 动态性能视图 :v$( ...

  7. 常用排序算法的Java实现 - 1

    学习编程语言时, 我们会接触到许多排序算法, 这里总结了一下常见的排序算法. 不定期更新. * 其实在Java中存在如Collections.sort()这样的方法来自动为我们排序, 不过学习排序算法 ...

  8. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  9. Ztree使用笔记

    在项目中需要用到树,使用了Ztree.(官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo,介绍很详细,有API,有demo) 1.初始化树:   $.f ...

  10. UVA 10801 Dij最短路（改模板）

    题意:有n个电梯,目的地是第K层(起点是第0层),给出每个电梯的速度,以及每个电梯能到达的层数,如果中途需要换电梯的话,时间需要+60,求到达目的地的最短时间: 思路:Dij求最短路.如果是另一条路比 ...