之前看到智能社主页的那个骰子样式的钟表，最近研究了一下，虽然没有仔细看他是怎么做的，但是学了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. to my friends-Don't give up so fast

    早上听到大学挺要好的朋友突然说要换行,心情就一股莫名的哀伤,因为当初是三个人一起约定好的,要朝着我们共同的目标而努力奋斗的,这股热情怎能这么轻易地被现实的冷水浇灭.没错,我们是刚出社会的毛头小子,我们 ...

  2. cppcheck 下载与安装(Liunx)

    下载网址:https://sourceforge.net/projects/cppcheck/files/cppcheck/ 选择安装包:cppcheck-1.75.tar.gz 解压安装包:tar ...

  3. eventUtil

    var eventUtil = { // 添加句柄 addHandler: function(element, type, handler) { if(element.addEventListener ...

  4. <1 小玩意(覆盖效果)

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  5. Android Studio项目目录结构

    在Android Studio中,提供了以下几种项目结构类型 我们一般常用的有以下两种结构: Project 结构类型 app/build/ app模块build编译输出的目录 app/build.g ...

  6. SPFA算法学习笔记

    一.理论准备 为了学习网络流,先水一道spfa. SPFA算法是1994年西南交通大学段凡丁提出,只要最短路径存在,SPFA算法必定能求出最小值,SPFA对Bellman-Ford算法优化的关键之处在 ...

  7. Roman to Integer -- LeetCode 13

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  8. Structs2中iterator的status属性的用法

    iterator标签主要是用于迭代输出集合元素,如list set map 数组等,在使用<s:iterator/>标签的时候有三个属性值得我们关注 1. value属性:可选的属性,va ...

  9. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  10. WebDriver定位元素方法

    如果把页面上的元素看作人的话,在现实世界如何找到某人呢?方法有三: 一.通过人本身的属性,例如他的姓名,手机号,身份证号,性别,这些可区别他人的属性.在web页面上的元素也有这些属性,例如,id.na ...