css实现圆形日历时钟效果代码-html代码-BFW代码库

css实现圆形日历时钟效果代码

代码语言：html

代码描述：css实现圆形日历时钟效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --bg-clr: radial-gradient(circle, white 40%, #bbb);
        /*   --bg-clr: rgba(255,255,255,.4); */
          --accent-clr: red;
          --time: '';
        }
        html {
          min-height: 100vh;
          display: grid;
          place-items: center;
          font-family: system-ui, sans-serif;
          overflow: hidden;
          background: #333;
          box-shadow: inset 0 0 200px black;
        }
        
        #calendar {
          width: min(80vh, 90vw);
          height: min(80vh, 90vw);
          border-radius: 50%;
          position: relative;
          transition: 1.5s;
          box-shadow: 0 0 25px black;
          background: var(--bg-clr);
        }
        
        #month {
          width: 50%;
          height: 50%;
          background: var(--bg-clr);
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          z-index: 1000;
          display: grid;
          place-items: center;
          text-align: center;
          font-size: 2rem;
          line-height: 2.25rem;
          filter: drop-shadow(0 0 25px rgba(0,0,0,.5));
          transition: .75s;
          text-transform: uppercase;
          user-select: none;
          font-weight: 100;
        }
        #month strong {
          font-weight: 500;
          font-size: 3rem;
          display: block;
        }
        #month hr {
          width: 80%;
          margin: 2rem auto 1.5rem auto;
          border: 0;
          border-bottom: 1px solid var(--accent-clr);
        }
        #month span {  
          width: 100%;
          height: 36px;
          text-align: center;
          letter-spacing: 3px;
          display: block;
          position: relative;
          margin-bottom: .5rem;
        }
        #month span:after {
          content: var(--time);
          position: absolute;
          left: 0;
          top: 0;
        }
        
        #month i {
          display: block;
          font-size: 1rem;
          line-height: 100%;
          font-style: normal;
        }
        
        .slice {
          background: rgba(0,0,0,.05);
          width: 10vh;
          height: 50%;
          position: absolute;
          left: 50%;
          top: 0;
          transform-origin: 50% 100%;
          transform: translate(-50%,0%);
          clip-path: polygon(0% 0%, 100% 0%, 50% 100%);   
          transition: width .5s;
          border-radius: 100% 100% 0% 0% / 3% 3% 0% 0%;  
          user-select: none;
          font-size: 1.25rem;
          text-align: center;
          line-height: 100%;
          box-sizing: border-box;
          padding-top: 2rem;
        }
        .slice span {
          font-size: 1rem;
          display: block;
        }
        .slice strong {
          font-weight: 500;
        }
        
        .today {  
          background: var(--accent-clr);
          height: 52.5%;
          top: -2.5%;
          z-index: 999;
          border-radius: 100% 100% 0% 0% / 15% 15% 0% 0%;
          font-size: 3rem;
          line-height: 2rem;
          color: #eee;
        }
        .today strong {
          font-weight: 900;
        }
    </style>




</head>

<body translate="no">
    <div id='calendar'>
        <div id='month'></div>
    </div>



    <script>
        var date = new Date().getDate();
        const d = new Date(Date.now());
        let month_year = d.toLocaleString('en-US', {month: 'short', year: 'numeric'}); // {month:'long'}
        const cal = document.querySelector('#calendar')
        const mon = document.querySelector('.........完整代码请登录后点击上方下载按钮下载查看