之前看到智能社主页的那个骰子样式的钟表，最近研究了一下，虽然没有仔细看他是怎么做的，但是学了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. UIScrollView 原理详解

    转载此文章原因:web页面在ipad的app中总是有橡皮筋效果,使用iscroll虽然能解决橡皮筋想过,但是滚动层内的元素事件都无法触发.故同安卓和ios一样使用后台解决...红色的为解决方案.. S ...

  2. 学完了js的知识，一起分享总结知识点

    又一个知识点学完了,到了总结学习效果和知识总结的时间了.js这个编程语言相对于html和css的逻辑性要强一些,也比较不容易上手.概念性的知识点不难理解,就是实际的操作并不容易,需要通过学习和借鉴案列 ...

  3. win7任务栏只显示日期不显示年月日

    某一天突然发现笔记本任务栏上的时间显示只剩下了时间,没有了年月日 于是百度 搜到的结果大多是如何设置显示的格式  yyyy-MM-dd 继续搜 终于搜到了正确答案 结果令我瞠目结舌  着实无奈 是因为 ...

  4. js中的cookie操作

    一.js cookie   使用时把此段代码引入页面 (function (factory) { if (typeof define === 'function' && define. ...

  5. iOS开发拓展篇—音乐的播放

    iOS开发拓展篇—音乐的播放 一.简单说明 音乐播放用到一个叫做AVAudioPlayer的类,这个类可以用于播放手机本地的音乐文件. 注意: (1)该类(AVAudioPlayer)只能用于播放本地 ...

  6. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  7. JDBC成绩管理系统

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  8. Windows 下java环境变量的配置（Windows7 ，8，8.1，10）

    Windows 下java环境变量的配置 在“系统”面板的左上角选择“高级系统设置”,在弹出的系统属性中选择”高级“项,然后点击右下角的“环境变量(N)...”,就此进入JAVA环境变量的配置. 如果 ...

  9. 初用Ubuntu常见问题及解决方案之一

    1.我的Vaio Fit15e的无线网卡是BCM43142,装了Ubuntu后为了装驱动折腾了好久,因为这款网卡在Broadcom官网都找不到驱动,google了一大圈,一个最简单的命令可以解决这个问 ...

  10. BZOJ 4034 BIT & Dfs序

    调了恒久突然发现输出优化忘记带负号了.. 就是差分树状数组维护Dfs序即可. #include <iostream> #include <cstring> #include & ...