动画时钟-由浅及深

也是一种思路吧，一步一步写的，js+css3。

动态时钟.gif

• js

 var block1=document.getElementById("blockBox1");
   var block2=document.getElementById("blockBox2");
   var block3=document.getElementById("blockBox3");

   var blockObj={
       init:function(){
           this.block1Init();
           this.block2Init();
           this.block3Init();
       },
       /**
        * 获取系统时间
        */
       sysBlock1:function(){
           var times=new Date();
           var y=times.getFullYear(),M=times.getMonth()+1,d=times.getDate(),
               h=times.getHours(),m=times.getMinutes(),s=times.getSeconds(),
               w=times.getDay(),weekArr=['日','一','二','三','四','五','六'];
               block1.innerHTML=`今天是${y}年${this.singleNumDeal(M)}月${this.singleNumDeal(d)}日${this.singleNumDeal(h)}时${this.singleNumDeal(m)}分${this.singleNumDeal(s)}秒 星期${weekArr[w]}`;
       },
       block1Init:function () {
           var that=this;
           this.sysBlock1();
           setInterval(function(){
               that.sysBlock1();
           },1000);
       },
       block2Init:function(){
            var that=this;
            this.imgBlock();
            setInterval(function(){
                that.imgBlock();
            },1000);

       },

       block3Init:function(){
           var that=this;
           this.aniBlock();
           setInterval(function(){
               that.aniBlock();
           },1000);

       },

       /**
        * 图片时钟
        */
       imgBlock:function(){
           var times=new Date();
           var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
               timeStr=''+h+':'+m+':'+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
               showStr='';
           for(var i=0;i<timeStrArr.length;i++){
               if(timeStrArr[i]==':'){
                   showStr+=pointStr;
               }else{
                   timeStrArr[i]='0'+(timeStrArr[i]-0+1);
                   showStr+=`<div class="img-wrapper"><img src="images/digit/digit_${timeStrArr[i]}.png"></div>`;
               }
           }
           block2.innerHTML=showStr;

       },
       lastTimeObj:'',
       /**
        * 动画时钟
        */
       aniBlock:function(){
           var times=new Date();
           var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
               timeStr=''+h+m+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
               showStr='';
               changeNum=0;
            // 判断从哪改变的
           for(var k=0;k<timeStr.length;k++){
                   if(timeStr[k]!=this.lastTimeObj[k]){
                       changeNum=k;
                       break;
                   }
               }
           // 不改变的位置正常循环
           for(var m=0;m<changeNum;m++){
               var curImg=`<img  src="images/digit/digit_${'0'+(timeStrArr[m]-0+1)}.png">`,
                   nextImg=timeStrArr[m]==9?`<img src="images/digit/digit_01.png">`:`<img  src="images/digit/digit_0${(timeStrArr[m]-0+2)}.png">`;
               var pStr='';
               if(m==1 || m==3){
                   pStr=pointStr;
               }
               showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
           }
          //  改变的位置到结束都要有动画
          for(var i=changeNum;i<timeStrArr.length;i++){
               var pStr='';
               if(i==1 || i==3){
                   pStr=pointStr;
               }
              var curImg=`<img class="cur-ani" src="images/digit/digit_${'0'+(timeStrArr[i]-0===0?1:timeStrArr[i]-0)}.png">`,
                  nextImg=`<img class="next-ani" src="images/digit/digit_0${(timeStrArr[i]-0+1)}.png">`;
                  showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
           }
           block3.innerHTML=showStr;
           this.lastTimeObj=timeStr;
       },

       /**
        * 单个数值处理
        * @param num
        */
       singleNumDeal:function (num) {
           var n=num>=10?num:'0'+num;
           return n;
       }

   };

   blockObj.init();

• css

  #blockBox1{
            text-align: center;
            line-height: 100px;font-size: 40px;}
        .box2{
            width: 800px; margin: 10px auto;height: 135px; overflow: hidden;
        }
        .box2 .img-wrapper{
             width: 90px;
            margin-right: 5px;
            float: left;
        }

       .cur-ani{ animation: ani 1s;}
        .next-ani{animation:bounceInUp 1s;}

        @keyframes bounceInUp {
            0%, 60%, 75%, 90%, 100% {
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            0% {
                opacity: 0;
                transform: translate3d(0, 3000px, 0);
            }

            60% {
                opacity: 1;
                transform: translate3d(0, -20px, 0);
            }

            75% {
                transform: translate3d(0, 10px, 0);
            }

            90% {
                transform: translate3d(0, -5px, 0);
            }

            100% {
                transform: translate3d(0, 0, 0); opacity: 1;
            }
        }
        @keyframes ani {
            from{
                margin-top:0px;
            }
            to{
                margin-top:-135px;
            }
        }

• html

<div id="blockBox1">
    
</div>


<div id="blockBox2" class="clear box2">
</div>


<div id="blockBox3" class="clear box2">
</div>