css实现支持夜晚模式挂在墙上的立体三维日历时间效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css实现支持夜晚模式挂在墙上的立体三维日历时间效果代码，点击开灯可看到夜晚亮灯模式效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Anton&amp;family=Oswald:wght@400;500;600;700&amp;family=Roboto:wght@500;700;900'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700'>

    <style>
        body {
          background: #F0EFEC;
          position: relative;
          min-height: 100vh;
        }
        body p {
          margin: 0;
          padding: 0;
        }
        
        #app {
          position: absolute;
          left: 50%;
          top: 20%;
          transform: translate(-50%);
        }
        
        .calendar {
          width: 100%;
          max-width: 350px;
          position: relative;
          box-shadow: -30px -5px 20px rgba(0, 0, 0, 0.3), -70px 40px 70px rgba(0, 0, 0, 0.2);
          margin-left: 16px;
        }
        .calendar::after {
          content: "";
          display: block;
          position: absolute;
          top: -3px;
          left: -16px;
          width: 15px;
          height: 100%;
          background: #A3A3A3;
          transform: skew(0, 20deg);
          border-left: 1px solid #888;
          overflow: hidden;
        }
        .calendar::before {
          content: "";
          display: block;
          width: 1px;
          height: 22px;
          background: #79746B;
          position: absolute;
          z-index: 2;
          top: 80%;
          left: -15px;
          opacity: 0.4;
          transform: skew(0, 20deg);
          box-shadow: 0 0 2px 1px #79746B, 1px -22px 2px 1px #A07F2E, 2px -44px 2px 1px #884940, 3px -66px 2px 1px #216164, 4px -88px 2px 1px #853555, 5px -110px 2px 1px #628279, 6px -132px 2px 1px #493B62, 7px -154px 2px 1px #772C22, 8px -176px 2px 1px #436251, 9px -198px 2px 1px #0B6575, 10px -220px 2px 1px #99834C, 11px -242px 2px 1px #4D4229, 12px -264px 2px 1px #89425A, 13px -286px 2px 1px #5A4C6A, 14px -308px 2px 1px #975B4B;
        }
        
        .header {
          text-align: center;
          padding: 10px 20px;
          background: #E3E3E3;
          color: #CCC;
          font-weight: bold;
          letter-spacing: 1px;
          text-shadow: 1px 1px 1px #F6F6F6;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          z-index: 2;
        }
        .header::before {
          content: "";
          display: block;
          position: absolute;
          top: -6px;
          left: -7px;
          width: 100%;
          height: 6px;
          background: #D5D5D5;
          transform: skew(69deg, 0);
        }
        .header .pin {
          width: 30px;
          height: 30px;
          background: #F6F6F6;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
        }
        .header .pin::before {
          content: "";
          display: block;
          width: 100%;
          height: 4px;
          background: #EEE;
          box-shadow: 0 1px 1px #FFF;
        }
        
        .hook {
          width: 80%;
          height: 40px;
          background: linear-gradient(0deg, rgba(163, 163, 163, 0.3) 0%, #E3E3E3 100%);
          position: absolute;
          z-index: 1;
          left: 7%;
          top: -45px;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          box-shadow: -3px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .hook::before {
          content: "";
          display: block;
          width: 16px;
          height: 18px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          z-index: 2;
          background: #F0EFEC;
          border-radius: 100%;
        }
        .hook::after {
          content: "";
          display: block;
          width: 16px;
          height: 18px;
          position: absolute;
          left: 50%;
          top: 0;
          bottom: 0;
          margin: auto auto auto -5px;
          z-index: 1;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 100%;
        }
        
        .body {
          background: #F2F2F2;
          background: linear-gradient(-30deg, #FFF 20%, #F2F2F2 70%);
          padding: 40px 30px 20px;
          color: #139AB4;
          text-transform: uppercase;
          position: relative;
          z-index: 3;
        }
        .body::before, .body::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          width: 8px;
          height: 18px;
        }
        .body::before {
          background: #FED538;
          margin-top: -18px;
        }
        .body::after {
          background: #139AB4;
        }
        .body .month {
          display: inline-block;
          font-weight: bold;
          font-size: 16px;
          text-align: center;
        }
        .body .date {
          font-size: 250px;
          font-weight: 700;
          text-align: center;
          color: #FED538;
          font-family: "Anton";
          margin: -40px 0 0 20px;
          transform: scale(1, 0.9);
          transform-origin: bottom right;
          letter-spacing: 15px;
        }
        
        .footer {
          width: 100%;
          height: 115px;
          display: flex;
          justify-content: space-between;
          text-align: center;
        }
        .footer .week {
          width: 50%;
          font-weight: 700;
          text-align: center;
          white-space: nowrap;
          margin-left: -15px;
          font-family: "Roboto";
        }
        .footer .week p + p {
          margin-top: 10px;
        }
        .footer .day {
          font-weight: 500;
          font-size: 40px;
        }
        .footer .lunar {
          font-weight: 400;
          font-size: 13px;
          font-family: "Oswald";
        }
        .footer .icons {
          width: 10%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .footer .icons .material-icons {
          font-size: 16px;
        }
        .footer .icons .material-icons:first-child {
          font-size: 20px;
        }
        
        .fullMonth {
          width: 25%;
        }
        .fullMonth .title {
          font-family: "Roboto";
          font-size: 12px;
        }
        .fullMonth table {
          transform-origin: left top;
          transform: scale(0.5) translate(-10%, 0);
          margin-top: 5px;
        }
        .fullMonth th {
          font-family: "Roboto";
        }
        .fullMonth th:first-child, .fullMonth th:last-child {
          color: #FED538;
        }
        .fullMonth td {
          padding: 2px;
          position: relative;
          z-index: 2;
          text-align: center;
          vertical-align: middle;
        }
        .fullMonth .now::after {
          content: "";
          display: block;
          width: 28px;
          height: 28px;
          border-radius: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(254, 213, 56, 0.7);
          z-index: -1;
        }
        
        .funcBox {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 50px auto 30px;
          position: relative;
          z-index: 9;
        }
        .funcBox .timer {
          padding: 10px 20px;
          font-size: 20px;
          font-family: "Roboto Mono";
          color: #139AB4;
          border-radius: 5px;
          border: 1px solid;
        }
        
        .lightBtn {
          background: #FFF;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid #FFF;
          margin-left: 20px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .lightBtn #btn {
          display: none;
        }
        .lightBtn span {
          display: inline-block;
          padding: 13px 20px;
          cursor: pointer;
          background: #DDD;
          color: #888;
          transition: all 0.15s;
        }
        .lightBtn .on {
          background: #139AB4;
          color: #FFF;
        }
        .lightBtn #btn:checked ~ label .off {
          background: #139AB4;
          color: #FFF;
        }
        .lightBtn #btn:checked ~ label .on {
          background: #DDD;
          color: #888;
        }
        
        .source {
          text-align: center;
        }
        .source a {
          display: inline-block;
          color: #A3A3A3;
          font-size: 15px;
          text-decoration: none;
          padding-bottom: 2px;
          border-bottom: 1px solid #A3A3A3;
        }
        
        body.active {
          background: #666;
        }
        body.active .calendar::after, body.active .header, body.active .hook, body.active .body::after {
          opacity: 0.6;
        }
        body.active .hook::before {
          background: #666;
        }
        body.active .day, body.active .month {
          text-shadow: 0 0 15px #77eaf9, 0 0 20px #77eaf9;
        }
        body.active .body {
          background: #CCC;
        }
        body.active .date {
          text-shadow: 0 0 50px #fff175, 0 0 200px #fff175, 0 0 300px rgba(255, 241, 117, 0.5);
        }
        body.active .now::after {
          background: #ffe13a;
        }
        body.active .material-icons:nth-child(1) {
          color: #ffe13a;
        }
        body.active .material-icons:nth-child(2) {
          color: #77eaf9;
        }
        body.active .material-icons:nth-child(3) {
          color: #d4f28e;
        }
        body.active .timer {
          color: #77eaf9;
          text-shadow: 0 0 15px rgba(119, 234, 249, 0.6), 0 0 20px rgba(119, 234, 249, 0.6);
        }
        
        @media (max-width: 640px) {
          #app {
            top: 15%;
            padding-bottom: 15%;
          }
        
          .calendar {
            transform: scale(0.7);
            transform-origin: center top;
            margin-bottom: -40%;
          }
        
          .source {
            transform: scale(0.9);
            transform-origin: center top;
          }
        }
    </style>



</head>



    <body>
        <div id="app">
            <div class="calendar">
                <div class="header">
                    <div class="pin"></div>
                    <p></p>
                    <div class="pin"></div>
                </div>
                <div class="hook"></div>
                <div class="body">
                    <div class="month"></div>
                    <div class="date"></div>
                    <div class="footer">
                        <div class="fullMonth">
                            <div class="title"></div>
                            <table>
                                <tr>
                                    <th>S</th>
                                    <th>M</th>
                                    <th>T</th>
                                    <th>W</th>
                                    <th>T</th>
                                    <th>F</th>
                                    <th>S</th>
                                </tr>
                            </table>
                        </div>
                        <div class="week">
                            <p class="en"></p>
                            <p class="day"></p>
                            <p class="lunar"></p>
                        </div>
                        <div class="icons">
                            <div class="material-icons">wb_sunny</div>
                            <div class="material-icons">cloud</div>
                            <div class="material-icons">brightness_1</div>
                        </div>
                    <.........完整代码请登录后点击上方下载按钮下载查看