簡約時鐘特效 html+css+js-有解無憂

一. 先看效果（實時顯示當前時間）：

在這里插入圖片描述

二. 實作（最后面有完整代碼）：

1. 定義盒子，.clock是整個鐘，.hour是時針，min是分針，sec是秒針，

 <div class="clock">

       <div class="hour"></div>
       <div class="min"></div>
       <div class="sec"></div>

    </div>

2. 給鐘添加基本樣式，寬高等等：

 .clock{
           width: 400px;
           height: 400px;
           background-image: url(clock.png);
           background-size: 100% 100%;
           box-shadow: inset 0  0px 10px 6px rgba(255, 255, 255, 0.5),
                             0  0px 25px   rgba(255, 255, 255, 0.5);
           border-radius: 50%;
           border: 2px solid rgba(255, 255, 255, 0.8);        
           background-color:  rgba(255, 255, 255, 0.2);
           backdrop-filter: blur(15px);
           position: relative;
          
       }

時鐘的數字背景圖片點我去獲取~

box-shadow: inset 0 0px 10px 6px rgba(255, 255, 255, 0.5),
0 0px 25px rgba(255, 255, 255, 0.5); 陰影，可以按照自己喜好設定，
backdrop-filter: blur(15px); 可以讓時鐘這個元素的后面區域模糊，
position: relative; 相對定位，因為那些分針等要絕對定位；

3. 用偽類給時鐘外邊再加一層圓圈，主要為了美觀，可省略或者修改：

.clock::before{
           content: '';
           position: absolute;
           top: -30px;
           left: -30px;
           bottom: -30px;
           right: -30px;
           border: 2px solid rgba(255, 255, 255, 0.8);        
           box-shadow: inset 0  0px 25px  rgba(53, 52, 52, 0.5),
                         0  0px 10px  rgba(255, 255, 255, 0.5);
           border-radius: 50%;
           

       }

4. 繼續用偽類為時鐘添加中間那個小圓點：

.clock::after{
           content: '';
           position: absolute;
           top: 50%;
           left: 50%;
           width: 20px;
           height: 20px;
           transform: translate(-50%,-50%);
           background-color: rgb(255, 255, 255);
           border-radius: 50%;
           z-index: 3; 
           
           border: 2px solid rgb(79, 146, 96);
           
       }

top: 50%;
left: 50%;
transform: translate(-50%,-50%); 以上這三句可以讓圓點居中對齊，
border-radius: 50%; 設定角的弧度，

z-index: 3; 在最外層顯示，數值要比時分秒針大；

5. 設定時針樣式，絕對定位

.hour{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 16px;
           height: 170px;
           background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%);         
           transform: translate(-50%,-50%);
           border-radius: 8px;
           transform-origin: center ;

       }

background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%); 利用背景圖片漸變色，讓整個盒子前50%顯示transparent透明色，后50%顯示藍色，這樣相當于一半被隱藏掉了，
transform-origin: center ; 設定旋轉的基點，center就是時針中心位置；

6.同樣的操作，設定分針：

.min{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 10px;
           height: 250px;
           background-image: linear-gradient(360deg,transparent 50%,rgb(0, 183, 255) 50%);
           transform: translate(-50%,-50%) ;
           border-radius: 5px;
           z-index: 1;
           transform-origin: center ;
          
       }

z-index: 1; 要打過時針；

7. 設定秒針：

 .sec{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 6px;
           height: 300px;
           background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);
           transform: translate(-50%,-50%);
           border-radius: 3px;
           z-index: 2;
           transform-origin: center ;
       }

background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);因為秒針后面要露出來一點，所以只讓30%變透明隱藏掉，
z-index: 2; 大過時針，分針，小過中心小白點，

js部分

  var hour  = document.querySelector('.hour');
         var min   = document.querySelector('.min');
         var sec   = document.querySelector('.sec'); 
         window.setInterval(function(){

            let shijian = new Date();
         let shi = shijian.getHours()*30;
         let fen  = shijian.getMinutes()*6;
         let miao = shijian.getSeconds()*6;
         hour.style.transform = `translate(-50%,-50%) rotateZ(${shi+shijian.getMinutes()*0.5}deg)`;
         min.style.transform = `translate(-50%,-50%) rotateZ(${fen}deg)`;
         sec.style.transform = `translate(-50%,-50%) rotateZ(${miao}deg)`;

         },1000)

let shijian = new Date();能夠回傳當前的實時時間；
shijian.getHours() 回傳小時（24小時制）；
shijian.getMinutes() 回傳分鐘；
shijian.getSeconds() 回傳秒數；
然后就是根據得到時分秒，讓時，分，秒針旋轉相應的角度，通過定時器1秒更新1次；
一圈有 360deg，12個小數，60分鐘，60秒鐘；
因為小時回傳24小時制的，所以算24小時會轉720deg，一小時就是30deg；
分針的話一分鐘360/60=5deg；
秒針的話一秒鐘360/60=5deg；
還有，時針雖然沒到下一個小時，但會根據分鐘而慢慢移動，60分鐘移動30deg，所以一分鐘30/60=0.5deg；

三.完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           background-image: linear-gradient(45deg, rgb(255, 166, 0) 50% ,rgb(0, 204, 255) 50% ); 

       }
       body::after{
           content: '';
           position: absolute;
           top: 0;
           left: 0px;
           width: 100%;
           height: 100%;
           background-image: linear-gradient(135deg,  rgb(110, 224, 125) 50% , transparent 50%); 
           z-index: -1;
       }
  
       .clock{
           width: 400px;
           height: 400px;
           background-image: url(clock.png);
           background-size: 100% 100%;
           box-shadow: inset 0  0px 10px 6px rgba(255, 255, 255, 0.5),
                             0  0px 25px   rgba(255, 255, 255, 0.5);
           border-radius: 50%;
           border: 2px solid rgba(255, 255, 255, 0.8);        
           background-color:  rgba(255, 255, 255, 0.2);


           backdrop-filter: blur(15px);


           position: relative;
          
       }
       .clock::before{
           content: '';
           position: absolute;
           top: -30px;
           left: -30px;
           bottom: -30px;
           right: -30px;
           border: 2px solid rgba(255, 255, 255, 0.8);        
           box-shadow: inset 0  0px 25px  rgba(53, 52, 52, 0.5),
                         0  0px 10px  rgba(255, 255, 255, 0.5);
           border-radius: 50%;
           

       }
       .clock::after{
           content: '';
           position: absolute;
           top: 50%;
           left: 50%;
           width: 20px;
           height: 20px;
           transform: translate(-50%,-50%);
           background-color: rgb(255, 255, 255);
           border-radius: 50%;
           z-index: 3; 
           
           border: 2px solid rgb(79, 146, 96);
           
       }
       .hour{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 16px;
           height: 170px;
           background-image: linear-gradient(360deg,transparent 50%,rgb(255, 153, 0) 50%);         
           transform: translate(-50%,-50%);
           border-radius: 8px;
           transform-origin: center ;

       }
       .min{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 10px;
           height: 250px;
           background-image: linear-gradient(360deg,transparent 50%,rgb(0, 183, 255) 50%);
           transform: translate(-50%,-50%) ;
           border-radius: 5px;
           z-index: 1;
           transform-origin: center ;
          
       }
       .sec{
           position: absolute;
           top: 50%;
           left: 50%;
           width: 6px;
           height: 300px;
           background-image: linear-gradient(360deg,transparent 30%,rgb(237, 243, 235) 30%);
           transform: translate(-50%,-50%);
           border-radius: 3px;
           z-index: 2;
           transform-origin: center ;
       }
    </style>
</head>
<body>
    


    <div class="clock">

       <div class="hour"></div>
       <div class="min"></div>
       <div class="sec"></div>

    </div>


    <script>
        
         var hour  = document.querySelector('.hour');
         var min   = document.querySelector('.min');
         var sec   = document.querySelector('.sec'); 

        

         window.setInterval(function(){

            let shijian = new Date();
         let shi = shijian.getHours()*30;
         let fen  = shijian.getMinutes()*6;
         let miao = shijian.getSeconds()*6;
         hour.style.transform = `translate(-50%,-50%) rotateZ(${shi+shijian.getMinutes()*0.5}deg)`;
         min.style.transform = `translate(-50%,-50%) rotateZ(${fen}deg)`;
         sec.style.transform = `translate(-50%,-50%) rotateZ(${miao}deg)`;

         },1000)
         
         

   
     /*  alert(shijian.getHours()); */
    /*  alert(shijian.getMinutes());  */
    /*  alert(shijian.getSeconds());  */

    </script>
</body>
</html>

總結：

其它文章~：
賽博朋克風格按鈕 html+css
回應式卡片懸停效果 html+css
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
炫彩流光按鈕 html+css
記一些css屬性總結（一）
Sass總結筆記

是啊，我也喜歡，溫柔，溫暖，以及尋找著互相吸引的東西，努力活下去的心，很喜歡，—夏目友人帳
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255224.html

標籤：其他

上一篇：datalist里的選項怎么增加提示

下一篇：周總結