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

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

代码语言：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;
          heigh.........完整代码请登录后点击上方下载按钮下载查看