简约时钟特效 html+css+js

最新推荐文章于 2024-01-26 11:25:59 发布

原创

最新推荐文章于 2024-01-26 11:25:59 发布 · 9k 阅读

92 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js #css3 #时钟

一. 先看效果（实时显示当前时间）：

在这里插入图片描述

二. 实现（最后面有完整代码）：

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);
           
       }