原生js+css实现简洁清爽迷你时钟指针走动显示时间效果代码-html代码-BFW代码库

原生js+css实现简洁清爽迷你时钟指针走动显示时间效果代码

代码语言：html

代码描述：原生js+css实现简洁清爽迷你时钟指针走动显示时间效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-shadow: border-box;
        }
        
        body {
          background-color: #1a1d1f;
          color: #f1f3f3;
        }
        
        @-webkit-keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        #tinyClock {
          z-index: 1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 1.5rem;
          border-radius: 2rem;
          background-color: rgba(255, 255, 255, 0);
          transition: 0.16s ease, box-shadow 0s;
          opacity: 0;
          -webkit-animation: fadeIn 0.4s 0.4s ease forwards;
                  animation: fadeIn 0.4s 0.4s ease forwards;
        }
        #tinyClock::before {
          content: "";
          position: absolute;
          top: 2rem;
          left: 50%;
          transform: translateX(-50%);
          height: 6px;
          width: 6px;
          border-radius: 100%;
          transition: 0.16s ease;
          background-color: rgba(215, 255, 255, 0);
        }
        #tinyClock:hover {
          background-color: rgba(255, 255, 255, 0.07);
          box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.18);
        }
        #tinyClock:hover .hands-container {
          box-shadow: 0 0 0 4px white;
        }
        #tinyClock:hover::before {
          background-color: #d7ffff;
        }
        
        .hands-container {
          position: relative;
          display: block;
          height: 6rem;
          width: 6rem;
          border-radius: 100%;
          box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
          transition: 0.16s ease;
        }
        
 .........完整代码请登录后点击上方下载按钮下载查看