【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下 - 模仿智能社网页下的.md

之前看到智能社主页的那个骰子样式的钟表，最近研究了一下，虽然没有仔细看他是怎么做的，但是学了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的下面，让时间差尽量少

t1.setTime(t_d - 1000); //把时间戳减少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{

    padding: 0;margin: 0;

    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;

    transform-origin: 50% 50% -40px;

    transition: 0.3s cubic-bezier(.18,.95,.65,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;

}

.dice li:nth-of-type(2){

    top: -80px;

    transform-origin: bottom;

    transform: rotateX(90deg);

}

.dice li:nth-of-type(1){

}

.dice li:nth-of-type(4){

    top: 80px;

    transform-origin: top;

    transform: rotateX(-90deg);

}

.dice li:nth-of-type(3){

    transform: translateZ(-80px) rotateX(180deg);

}

.dice li:nth-of-type(5){

    left: 80px;

    transform-origin: left;

    transform: rotateY(90deg); 

}

.dice li:nth-of-type(6){

    left: -80px;

    transform-origin: right;

    transform: rotateY(-90deg);

}

.dice .colon{

    opacity: 1;

}

@keyframes move{

 0%{transform: rotateX(5deg) rotateY(5deg);}

 100%{transform: rotateX(-5deg) rotateY(-5deg);}

}

</style>

<script>

window.onload = function(){

 var aUl = document.getElementsByTagName(‘ul‘);

 

 for (var i=0;i<aUl.length;i++) {

        aUl[i].angle = 0;

        aUl[i].Index = 0;

        aUl[i].onOff = true;

 }

 

 function turn(obj,now,next){ //这里的now和next分别指的是另一个函数里要用到的变量，为了可以用它们，需要在这里先把它们当做参数写，然后在另外一个函数里调用时，将参数写进去

 var aLi = obj.getElementsByTagName(‘li‘);

 for (var i=0; i<aLi.length; i++) {

            aLi[i].index = i;

 }

 

        obj.Index_ = obj.Index + 1;

 

 if(obj.Index_ === 4){

            obj.Index_ = 0;

 }

 

 if(obj.onOff){

            aLi[obj.Index].innerHTML = now;

            obj.onOff = false;

 }

 

 if(now!==next){

            aLi[obj.Index_].innerHTML = now;

            obj.angle -= 90;

            obj.style.transform = ‘rotateX(‘+obj.angle+‘deg)‘;

            obj.Index++;

 }

 for (var i=0; i<4; i++) {

            aLi[i].style.opacity = 0.2;

            aLi[i].style.color = ‘lightgrey‘;

 }

 

 if(obj.Index === 4){

            obj.Index = 0;

 }

        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 iSecR = iSec - parseInt(iSec/10)*10;

 var iSecL = parseInt(iSec/10);

 var iMinR = iMin - parseInt(iMin/10)*10;

 var iMinL = parseInt(iMin/10);

 var iHourR = iHour - parseInt(iHour/10)*10;

 var iHourL = parseInt(iHour/10);

 

 var t_d = t.getTime();

 

 var t1 = new Date();

        t1.setTime(t_d - 1000);

 var iSec_ = t1.getSeconds();

 var iMin_ = t1.getMinutes();

 var iHour_ = t1.getHours();

 var iSecR_ = iSec_ - parseInt(iSec_/10)*10;

 var iSecL_ = parseInt(iSec_/10);

 var iMinR_ = iMin_ - parseInt(iMin_/10)*10;

 var iMinL_ = parseInt(iMin_/10);

 var iHourR_ = iHour_ - parseInt(iHour_/10)*10;

 var iHourL_ = parseInt(iHour_/10); 

 

        turn(aUl[0],iSecR,iSecR_); //这里调用的时候将对应的变量传给now和next上即可

        turn(aUl[1],iSecL,iSecL_);

        turn(aUl[3],iMinR,iMinR_);

        turn(aUl[4],iMinL,iMinL_);

        turn(aUl[6],iHourR,iHourR_);

        turn(aUl[7],iHourL,iHourL_);

 

 }

    getTime();

    setInterval(getTime,1000);

 

};

</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>
时间： 2024-10-22 00:32:31

【原】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）下 - 模仿智能社网页下的.md的相关文章

【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上—— 妙味课堂

这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. 利用transform: rotateX, rotateY, rotateZ来定义物体转动轴,实现3D旋转 给一个正方体设置6个面,每个面都设置旋转基面,并且直接先朝各个方向转90度,有一个面要注意,就是和最前面的那个面的对面,不用转,但是要用transform: translateZ()来让这个面

【学】CSS3的3D动画 ——3D旋转（1）—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height

css3 --- 翻页动画 --- javascript --- 3d --- 准备

用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transition属性做的渐变颜色动画,下面是三张截图: 怎么样?好看吧,下面是它的代码: -webkit-transition: background-color 2s;-webkit-是用chrome或safari打开的一个前缀,transition时表示渐变的属性,它的值是 渐变属性 和 渐变时间,上面注释的部分

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg

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

今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的??.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的

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

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性. transition字面意思是变迁.变换.过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是: transition-property:指定过度的元素; 如:transition-property:background,就是指

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

首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective:用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块.这里用到了 perspective 属性和 perspective-origin 属性. perspective:用来定义3d动画距离浏览器的距离,单位是(px). perspective-origin:效果渲染的视角

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

CSS3中的3D动画实现(钟摆.魔方) CSS3的2D变形----传统的transform变形效果 transform : translate.scale.rotate.skew- translate:平移.scale:缩放.rotate:旋转.skew:倾斜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tran

css3动画效果：3 3D动画

立方体旋转动画效果 css 1 #container{ 2 width: 400px; 3 height: 400px; 4 -webkit-perspective:800; 5 perspective:800; 6 -webkit-perspective-origin:50% 225px; 7 perspective-origin:50% 225px; 8 9 } 10 #stage{ 11 width: 300px; 12 height:300px; 13 14 -webkit-transi