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

  1. 程序写到一半，发现只有chrome和ff支持，而用ie11是没有效果的，然后用ie11去打开智能社网页，效果也是没有，调查了一下，应该是transform-style:preserve-3d这个样式在ie11下还不支持，使得对象无法以3d的样式呈现，至于兼容方式，自己还没有花时间研究，所以这个效果暂时只能用chrome或者ff打开。
  2. 复习了一下关于时间获取的语句var t = new Date(),另外还学习了如何获取当前时间的下一段时间的方式，比如获取当前时间的前一秒，思路是要用到时间戳getTime()，就是当前时间t到1970年的毫秒数，然后加上1000即可。具体代码如下：
var t = new Date(); //获取当前时间
var t_d = t.getTime(); //获取时间戳t_d，就是t到1970年的毫秒数
var t1 = new Date();//设置t1也是当前时间，这里我自己有个疑问，因为这里t1其实和t肯定是有一点时间差的，也许这个时间实在太短，可以忽略，或者我可以把这句接在var t的下面，让时间差尽量少
); //把时间戳减少1000毫秒，通过setTime对t1进行操作，就可以让t1成为t的前一秒事件

3. will-change: transform;这个属性是可以增加css3动画的流畅度的，具体原理可以查看这篇张鑫旭的博客：http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

4.  写js的时候还是遇到了一些代码重复的问题，就比如如何将一个函数里要用到另一个函数里的变量，该怎么写，后来想到了用传参数的方法可以解决，把另一个函数fn2里的变量用t代替写在这个函数fn1的参数中，然后在fn2里调用fn1时，把参数传进fn1里即可，详细代码可以见下面

<style>
ul{
;
list-style: none;
}
#wrap{
margin: 70px auto;
width: 800px;
height: 80px;
padding: 30px;
transform-origin: center center center;
animation: move 5s linear infinite alternate;
transform-style: preserve-3d;
will-change: transform;
}
.outerbox{
perspective: 500px;
height: 80px;
margin: 10px;
float: right;
transform-origin: center center;
transform-style: preserve-3d;
transform: rotateY(10deg);
will-change: transform;
}
.dice{
width: 80px;
height: 80px;
transform-style: preserve-3d;
% -40px;
,1.46);
position: relative;
will-change: transform;
}
.dice li{
width: 78px;
height: 78px;
border: 1px solid black;
font: 50px/80px arial;
font-weight: bold;
text-align: center;
position: absolute;
opacity: 0.4;
will-change: transform;
}
){
top: -80px;
transform-origin: bottom;
transform: rotateX(90deg);
}
){
}
){
top: 80px;
transform-origin: top;
transform: rotateX(-90deg);
}
){
transform: translateZ(-80px) rotateX(180deg);
}
){
left: 80px;
transform-origin: left;
transform: rotateY(90deg);
}
){
left: -80px;
transform-origin: right;
transform: rotateY(-90deg);
}
.dice .colon{
;
}
@keyframes move{
%{transform: rotateX(5deg) rotateY(5deg);}
%{transform: rotateX(-5deg) rotateY(-5deg);}
}
</style>
<script>
window.onload = function(){
var aUl = document.getElementsByTagName('ul');
 
;i<aUl.length;i++) {
;
;
aUl[i].onOff = true;
}
 
function turn(obj,now,next){ //这里的now和next分别指的是另一个函数里要用到的变量，为了可以用它们，需要在这里先把它们当做参数写，然后在另外一个函数里调用时，将参数写进去
var aLi = obj.getElementsByTagName('li');
; i<aLi.length; i++) {
aLi[i].index = i;
}
 
;
 
){
;
}
 
if(obj.onOff){
aLi[obj.Index].innerHTML = now;
obj.onOff = false;
}
 
if(now!==next){
aLi[obj.Index_].innerHTML = now;
;
obj.style.transform = 'rotateX('+obj.angle+'deg)';
obj.Index++;
}
; i++) {
aLi[i].style.opacity = 0.2;
aLi[i].style.color = 'lightgrey';
}
 
){
;
}
aLi[obj.Index].style.opacity = 0.8;
aLi[obj.Index].style.color = 'black';
document.title=now+"::"+next;
}
 
function getTime(){
var t = new Date();
var iSec = t.getSeconds();
var iMin = t.getMinutes();
var iHour = t.getHours();
 
;
);
;
);
;
);
 
var t_d = t.getTime();
 
var t1 = new Date();
);
var iSec_ = t1.getSeconds();
var iMin_ = t1.getMinutes();
var iHour_ = t1.getHours();
;
);
;
);
;
);
 
],iSecR,iSecR_); //这里调用的时候将对应的变量传给now和next上即可
],iSecL,iSecL_);
],iMinR,iMinR_);
],iMinL,iMinL_);
],iHourR,iHourR_);
],iHourL,iHourL_);
 
}
getTime();
);
 
};
</script>
</head>
<body>
<div id="wrap">
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li class="colon">:</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li class="colon">:</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="outerbox">
<ul class="dice">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>

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

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

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

  2. 【巩固】CSS3的3D动画 ——3D旋转（1）

    最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...

  3. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

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

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

  6. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  7. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  8. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  9. css3图书3D动画

    css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

  1. 解决安装vc2005运行库时提示Command line option syntax error.Type Command/?for Help

    安装vc2005运行库时提示 这是因为它要自解压到用户的临时文件夹下,如果用户名中带中文,就会报错. 简单的解决方法是,手动解压之,再安装 当然,你也可以修改用户名或者再新建个用户.

  2. WebView注入Java对象注意事项

    在android4.2以前,注入步骤如下: webview.getSetting().setJavaScriptEnable(true); class JsObject { public String ...

  3. Java—接口与抽象类

    一.接口 Java编程语言中禁止多继承属性,但可以通过接口来帮助类扩展方法.接口中可以定义大量的常量和方法,但其中的方法只是一种声明,没有具体的实现,使用接口的类自己实现这些方法. 接口与类的不同在于 ...

  4. javascript 继承实现

    JavaScript高级程序设计读书笔记 这本书继承的实现列举了好几种,里面有两种是比较靠谱的. 1 组合继承 //父构造函数 function Super(name) { this.name = n ...

  5. CPU指令系统

    CPU就是通过指令系统来操控寄存器然后实现读取数据的,所以我们必须介绍一下CPU的指令系统 如果我们知道指令的英文全称,这对我们理解指令的作用有很大帮助,所以贴出指令英文全称 接下来就是介绍一些主要的 ...

  6. pymongo 3.3 使用笔记

    #首先安装pymongo sudo pip install pymongo || sudo easy_install pymongo #demo均在交互解释器下进行 from pymongo impo ...

  7. ACM感悟

    声明:本文是写给弱校ACM新手的一点总结,受自身水平和眼界所限,难免会有一些个人主观色彩,希望大牛指正 感谢@Wackysoft .@哇晴天 . @ 一切皆有可能1 的指教,现根据这些建议,文章已进行 ...

  8. Warning: Attempt to dismiss from view controller <UIViewController: 0x17d71c10> while a presentation or dismiss is in progress!

    昨天 调试程序 已经快要上线了 突然有个BUG 找了半天 才找到是因为这个警告 但是 解决这个警告又花了一天的时间 试了各种消除控制器的方法 都不可用 其中 并且 有这个bug  手机真机测试完全没问 ...

  9. .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  10. M3: 发送邮件附件（2）

    本小节介绍如何通过邮件将生成的贺卡发送给朋友.使用到了EmailMessageAPI, 需要引入的命名空间为Windows.ApplicationModel.Email. 请确保完成了以前的章节. 在 ...