当前位置:首页 > HTML/CSS > 正文内容

3D时间显示

彭淇3年前 (2017-09-13)HTML/CSS28872

js获取时间与css3 3D属性做出的3D旋转时间

3D时间显示  js 视觉差 统计 时间 加载 第1张


源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css3 3D变换-JavaScript时间对象</title>
  <style type="text/css">
  *{ 
    margin: 0;
    padding: 0;
   }
   html,
   body{
    width: 100%;
    height: 100%;
    font: 20px "microsoft yahei";
   }
   body{
    perspective: 1500px;
    background: #000;
    font-family: "microsoft yahei";
    color: #fff;
   }
   #xbox{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    margin: -50px 0 0 -350px;
    text-align: justify;
    transform: rotateZ(0deg);
    animation: 4s mov infinite;
   }
   #xbox:after{
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
   }
   .rotate{
    transform-style: preserve-3d;
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: 1s;
    transform: rotateX(0deg);
   }
   .box{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    backface-visibility: hidden;
    -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
   }
   .front,
   .case-front{
    box-shadow: inset 0 0 10px #eeaeff;
    transform: translateZ(25px);
   }
   .bottom,
   .case-bottom{
    box-shadow: inset 0 0 10px #88D5FF;
    transform-origin: bottom;
    transform: translateZ(-25px) rotateX(-90deg);
   }
   .back,
   .case-back{
    box-shadow: inset 0 0 10px #ECA6FF;
    transform: translateZ(-25px) rotateX(-180deg);
   }
   .top,
   .case-top{
    box-shadow: inset 0 0 10px #FFD6AE;
    transform-origin: top;
    transform: translateZ(-25px) rotateX(90deg);
   }
   .colon{
    animation: 1s flash infinite;
   }
   @keyframes flash{
    form{ color: #fff; }
    to{ color: #000; }
   }
  </style>
</head>
<body>
  <div id="xbox">
    <!-- 时 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate colon">
      <div class="box case-front">:</div>
      <div class="box case-bottom"></div>
      <div class="box case-back">:</div>
      <div class="box case-top"></div>
    </div>
     <!-- 分 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate colon">
      <div class="box case-front">:</div>
      <div class="box case-bottom"></div>
      <div class="box case-back">:</div>
      <div class="box case-top"></div>
    </div>
    <!-- 秒 -->
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div>
    <div class="rotate wrap">
      <div class="box front case"></div>
      <div class="box bottom case"></div>
      <div class="box back case"></div>
      <div class="box top case"></div>
    </div> 
  </div>
  <script>
    var oXbox = document.getElementById('xbox');
    var aWrap = document.getElementsByClassName('wrap');
    var aFront = document.getElementsByClassName('front');
    var aBottom = document.getElementsByClassName('bottom');
    var aBack = document.getElementsByClassName('back');
    var aTop = document.getElementsByClassName('top');
    var str = '';
    setInterval(timer,1000);
    timer();
    function timer(){
      // 获取时间
      var myTime = new Date();
      var iYear = myTime.getFullYear();
      var iMonth = myTime.getMonth()+1;
      var iDay = myTime.getDate();
      var iHours = myTime.getHours();
      var iMin = myTime.getMinutes();
      var iSec = myTime.getSeconds();
      str = toTwo( iHours ) + toTwo( iMin ) + toTwo( iSec );
      for( var i=0; i<aFront.length; i++ ){
        var _n = str.charAt(i);
        // 为4面选择显示对应的数字
        if( _n == 0 || _n == 4 || _n == 8 )aFront[i].innerHTML = _n;
        if( _n == 1 || _n == 5 || _n == 9 )aBottom[i].innerHTML = _n;
        if( _n == 2 || _n == 6 )aBack[i].innerHTML = _n;
        if( _n == 3 || _n == 7 )aTop[i].innerHTML = _n;
        aWrap[i].style.cssText = 'transform:rotateX('+ _n*90 +'deg)';
      }
    }
    function toTwo( n ){ return n<10 ? '0' + n : '' + n; }
  </script>
</body>
</html>

扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/108.html

分享给朋友:

相关文章

css简单导航条制作

css简单导航条制作,效果如图所示:<!DOCTYPE html> <html lang="en"> <head>...

DIV+CSS设计页面时的常见错误预防技巧

DIV+CSS设计页面时的常见错误预防技巧

以下是一些DIV+CSS设计页面时的常见错误的预防技巧,希望能对大家有所帮助。 1. 检查HTML元素是否有拼写错误、是否忘记结束标记...

关于本站已开通APP下载的公告

亲,大家好,本站于2017年9月6日正式开通用户下载APP功能,欢迎大家积极下载,成为本站的一份子!用户下载(可以直接点击此处,进行下载)(欢迎在下方直接安装,更方便哟)温馨提示:本软件经检测为无病毒...

给网站添加好看的底部功能按钮

给网站添加好看的底部功能按钮

在一些博客手机版会看到底部有些按键很好看!跟下面图片的一样,把代码随便添加到首页或者footer文件就行<style type="text/css">.nav...

纯CSS实现各种图形效果分享

纯CSS实现各种图形效果分享 CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线...

CSS高效书写小贴士分享

统一样式书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, m...

评论列表

齐鲁
齐鲁
3年前 (2017-09-14)

[code][S19]好羞射,文章真的好赞啊,顶博主![/code]

彭淇
3年前 (2017-09-14)

[code][S19]好羞射,文章真的好赞啊,顶博主![/code]

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。