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

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

程序写到一半，发现只有chrome和ff支持，而用ie11是没有效果的，然后用ie11去打开智能社网页，效果也是没有，调查了一下，应该是transform-style:preserve-3d这个样式在ie11下还不支持，使得对象无法以3d的样式呈现，至于兼容方式，自己还没有花时间研究，所以这个效果暂时只能用chrome或者ff打开。
复习了一下关于时间获取的语句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>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li class="colon">:</li>

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li class="colon">:</li>

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

<div class="outerbox">

<ul class="dice">

<li></li>

</ul>

</div>

</body>

</html>

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

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上
这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写这个效果需要用到transform-style: preserve-3d. ...
【巩固】CSS3的3D动画 ——3D旋转（1）
最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...
CSS3 动画3D视角下旋转圆环
首先是 transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态本次以圆形( ...
3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
[web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
css3 transition属性实现3d动画效果
transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...
css3图书3D动画
css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

WCF初探-12：WCF客户端异常处理
前言: 当我们打开WCF基础客户端通道(无论是通过显式打开还是通过调用操作自动打开).使用客户端或通道对象调用操作,或关闭基础客户端通道时,都会在客户端应用程序中出现异常.而我们知道WCF是基于网络的 ...
解决ajax中文乱码问题
主要遇到的问题: 一.ajax向服务器提交的数据有中文,没有设置编码方式.造成服务器接收到乱码二.服务器向ajax返回数据中有中文,没有设置响应编码方式,造成ajax接收到乱码乱码产生的原因:不管 ...
块级元素 Vs 内联元素
HTML的元素可以分为两种: 块级元素(block level element ) 内联元素(inline element ) 二者的区别如下: 1. 块级元素独占一行(除非显示修改元素的displa ...
wine install 32bit netframewok
WINEARCH=win32 WINEPREFIX=~/.wine32 winecfg env WINEARCH=win32 WINEPREFIX=~/.wine32 winetricks dotne ...
需要使用id内省方法--responsesToSelector: 的两个地方
第一个: 当从数组中取出对象,并且需要执行某个方法时,最好使用responsesToSelector:判断该对象是否可以执行该方法.因为在OC数组中,取出的对象都是 id 类型的. 第二个: 在MV ...
Jmeter—3 http请求—content-type与参数
本文讲三种content-type以及在Jmeter中对应的参数输入方式第一部分:目前工作中涉及到的content-type 有三种: content-type:在Request Headers里, ...
hdu 2079
ps:昨天刚做了个母函数的,觉得不太熟,今天又是母函数..很好.. 代码: #include "stdio.h" #include "string.h" ]; ...
codeforces 682C Alyona and the Tree（DFS）
题目链接:http://codeforces.com/problemset/problem/682/C 题意:如果点v在点u的子树上且dist(u,v)>a[v]则u和其整个子树都将被删去,求被 ...
IOS UIWebView引用外部CSS样式（转载）
首先,将要引用的CSS样式导入到工程文件,然后我们可以自己拼装一个网页并引用这个样式,具体代码实现如下: -(void)viewDidLoad { [super viewDidLoad]; NSStr ...
【转载】分享一些Qt学习资源，欢迎下载
资源来源:http://bbs.csdn.net/topics/390358737 经过我一翻整理,把一些我收集到的Qt学习资源分享给大家,主要适合新手,老鸟可以直接忽略我.要说明一下,很多资源都是在 ...

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

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

随机推荐

热门专题