之前看到智能社主页的那个骰子样式的钟表，最近研究了一下，虽然没有仔细看他是怎么做的，但是学了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. OC面向对象—封装

    OC面向对象—封装 一.面向对象和封装 面向对象的三大特性:封装(成员变量).继承和多态 在OC语言中,使用@interface和@implementation来处理类. @interface就好像暴 ...

  2. 省常中模拟 day1

    第一题: 题目大意: 给出N个数的数列,如果相邻的两个数加起来是偶数,那么就可以把这两个数消掉,求最多能消掉多少数. 解题过程: 1.先自己手工模拟了几组数据,发现不管消除的顺序如何,最终剩下的是一定 ...

  3. Rhel6-mysql_cluster配置文档

    MySQL Cluster 是一种技术,其主要功能是在无共享的相关系统中部署内存中数据库 的 Cluster .在通过无共享体系结构,系统能够使用廉价的硬件,而且对软硬件无特殊要求. 此外,由于每个组 ...

  4. warning C4305: “=”: 从“int”到“unsigned char”截断解决方法[zz]

    在控制台程序中定义: float x; x=22.333; 编译会出现 warning C4305: “初始化”: 从“double”到“float”截断 系统默认此浮点数是22.333是double ...

  5. 闭包的理解-from my own opinion

    闭包,说起来那么难,其实理解了作用域,那么理解闭包就容易多了. 全局环境,局部环境,这两个概念很好理解了.那么要深入理解下函数的局部环境. 函数的局部环境,也就是说在一个函数内定义的变量,这个变量只能 ...

  6. 2016 - 1 - 24 NSURLSession （一）

    一: NSURLSession简介 1.实施步骤 1.1 使用 NSURLSession对象 创建TASK ,然后执行TASK 2.TASK的类型: 二: NSURLSession的简单使用: - ( ...

  7. Day14 summary

    Since I am writing blog in Ubuntu which has not installed Chinese language package, this blog will b ...

  8. 大量无线键盘存在KeySniffer漏洞-可嗅探用户输入的内容

    几美元的一根天线.一个无线发射器,还有几行Python代码,有了这些,黑客就可以在几十米开外主动地记录下你的用户名.密码.信用卡.你写的稿子,总之就是你用无线键盘输入的任何东西. 黑客所利用的是一种无 ...

  9. 标准IO的简单应用，动静态库，读取系统时间并打印，模拟ls -l功能

    2015.2.27星期五,小雨 标准IO实现的复制功能: #include <stdio.h>#include <errno.h> #define N 64 int main( ...

  10. c/c++ 函数指针 指针函数 数组的引用 指针数组 数组指针

    1.指针数组数组指针 引用数组 数组的引用 int *a[10] 指针数组 每一个元素都是一个指针 Int (*a)[10] 数组指针 P指向一个含有10个元素的数组 Int (&a)[10] ...