简约时钟特效 html+css+js

前端大杂烩 同时被 2 个专栏收录
94 篇文章 6 订阅
22 篇文章 10 订阅

一. 先看效果(实时显示当前时间):

在这里插入图片描述

二. 实现(最后面有完整代码):

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; 大过时针,分针,小过中心小白点。

  1. 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总结笔记

是啊,我也喜欢。温柔,温暖,以及寻找着互相吸引的东西,努力活下去的心,很喜欢。—夏目友人帐
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页

打赏

北极光之夜。

谢谢~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值