前端使用css3实现模拟时钟

最新推荐文章于 2025-05-21 10:01:13 发布
代码De搬运工
最新推荐文章于 2025-05-21 10:01:13 发布
阅读量229
点赞数
文章标签：前端 javascript vue.js
本文链接：https://blog.youkuaiyun.com/m0_46577631/article/details/127966363
版权
在这里插入图片描述
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟时钟</title>
<style>
   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
   body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
   }
   body::before{
      content: "";
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,#e91e63,#e91e63 50%,
      #ffc107 50%,#ffc107);
   }
   body::after{
      content: "";
      position: absolute;
      top:-20px;
      left:0;
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg,#03a9f4,#03a9f4 50%,
      transparent 50%,transparent);
      animation: animate 5s ease-in-out infinite;
   }
   @keyframes animate{
      0%,100%{
         transform: translateY(10px);
      }
      50%{
         transform: translateY(-10px);
      }
   }
   .container{
      position: relative;
   }
   .container::before{
      content: "";
      position:absolute;
      bottom: -150px;
      width: 100%;
      height: 60px;
      background: radial-gradient(rgba(0,0,0,0.2),transparent,transparent);
      border-radius: 50%;
   }
   .box{
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      backdrop-filter:blur(25px);
      border:1px solid rgba(255,255,255,0.5);
      animation: animate 5s ease-in-out infinite;
      animation-delay: -2.5s;
   }
   .box::before{
      position: absolute;
      content: "";
      height: 220px;
      width: 220px;
      background:#fff;
      border-radius: 50%;
      box-shadow:inset -3px -3px 7px #ffffff73,
      inset 3px 3px 5px rgba(94,104,121,0.288)
   }
   .box::after{
      position: absolute;
      content:"";
      height: 120px;
      width: 120px;
      background:#fff;
      border-radius: 50%;
      box-shadow: -1px -1px 5px #ffffff73,
      1px 1px 3px rgba(94,104,121,0.288);
   }
   .box .center-nut{
      height: 10px;
      width: 10px;
      z-index:1;
      border-radius: 50%;
      border:1px solid #333;
      background: #67CAF3
   }
   .indicators div{
        width: 2px;
        height: 10px;
        background: #333;
        position: absolute;
        top:48%;
        left: 49.5%;
        transform: translateY(-50%);
   }
   .indicators div:nth-child(1){
      transform: rotate(30deg) translateY(-100px);
   }
   .indicators div:nth-child(2){
      transform: rotate(60deg) translateY(-100px);
   }
   .indicators div:nth-child(3){
      transform: rotate(90deg) translateY(-100px);
   }
   .indicators div:nth-child(4){
      transform: rotate(120deg) translateY(-100px);
   }
   .indicators div:nth-child(5){
      transform: rotate(150deg) translateY(-100px);
   }
   .indicators div:nth-child(6){
      transform: rotate(180deg) translateY(-100px);
   }
   .indicators div:nth-child(7){
      transform: rotate(210deg) translateY(-100px);
   }
   .indicators div:nth-child(8){
      transform: rotate(240deg) translateY(-100px);
   }
   .indicators div:nth-child(9){
      transform: rotate(270deg) translateY(-100px);
   }
   .indicators div:nth-child(10){
      transform: rotate(300deg) translateY(-100px);
   }
   .indicators div:nth-child(11){
      transform: rotate(330deg) translateY(-100px);
   }
   .indicators div:nth-child(12){
      transform: rotate(360deg) translateY(-100px);
   }
   .sec-hand,.min-hand,.hr-hand{
         position: absolute;
   }
   .sec-hand,.sec{
      height: 180px;
      width: 180px;
      z-index:6
   }
   .min-hand,.min{
      height: 140px;
      width: 140px;
      z-index:5
   }
   .hr-hand,.hr{
      height: 110px;
      width: 110px;
      z-index:4
   }
   .sec,.min,.hr{
      display: flex;
      justify-content: center;
      position: absolute;
   }
   .sec::before{
      position: absolute;
      content:"";
      height: 110px;
      width: 3px;
      background: #3498db;
   }
   .sec::after{
      position: absolute;
      content:"";
      height: 35px;
      width: 7px;
      background: #3498db;
      top:105px;
      border-radius: 5px;
   }
   .min::before{
      position: absolute;
      content:"";
      top:-15px;
      width: 1px;
      border-left: 3px solid transparent;
      border-right:3px solid transparent ;
      border-bottom: 60px solid #e95949;
   }
   .min::after{
      position: absolute;
      content:"";
      top:40px;
      width: 3px;
      border-left:2px solid transparent;
      border-right:2px solid transparent ;
      border-top: 30px solid #e95949;
   }
   .hr::before{
      position: absolute;
      content:"";
      width: 1px;
      border-left: 3px solid transparent;
      border-right:3px solid transparent ;
      border-bottom: 30px solid #303030;
   }
   .hr::after{
      position: absolute;
      content:"";
      top:34px;
      width: 3px;
      border-left:2px solid transparent;
      border-right:2px solid transparent ;
      border-top: 30px solid #303030;
   }
</style>
</head>
<body>
     <div class="container">
        <div class="box">
           <div class="center-nut"></div>
           <div class="center-nut2"></div>
           <div class="indicators">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="sec-hand">
               <div class="sec"></div>
            </div>
            <div class="min-hand">
               <div class="min"></div>
            </div>
            <div class="hr-hand">
               <div class="hr"></div>
            </div>
         </div>
      </div>
      <script>
         let sec=document.querySelector(".sec")
         let min=document.querySelector(".min")
         let hr=document.querySelector(".hr")
         setInterval(()=>{
             let time = new Date();
             let secs=time.getSeconds()*6;
             let mins=time.getMinutes()*6;
             let hrs=time.getHours()*30;
             sec.style.transform=`rotateZ(${secs}deg)`
             min.style.transform=`rotateZ(${mins}deg)`
             hr.style.transform=`rotateZ(${hrs+(mins/12)}deg)` //时针不能只走整点，所以多一个mins/12
         },1000)
      </script>
</body>
</html>