手表样式CSS - 荣小站

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>手表</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto:wght@400&display=swap">
    <style>
      .watch {
        --watch-color: white;
        --screen-color: black;
        font-size: 4.5vmin; /* 默认字体大小 */
        font-family: 'Roboto', sans-serif; /* 默认字体 */
        color: #fff;
        padding: 5em 2.5em; /* 调整padding以增加手表大小 */
        border: 2px solid var(--watch-color);
        border-radius: 2em;
        box-shadow: inset 0 0 2px black, /* 使用固定的边框阴影 */
          inset 0 0 1rem 1em hsl(0 0% 100% / 0.25);
        background-color: var(--screen-color);
        background-image: url('你想要设置的背景图地址');
        background-size: cover; /* 使背景图像覆盖整个手表 */
        background-position: center; /* 使背景图像居中 */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 400px; /* 固定宽度 */
        height: 400px; /* 固定高度 */
        box-sizing: border-box; /* 确保边框和内边距包含在总宽高内 */
      }
      .time {
        font-family: 'Dancing Script', cursive; /* 艺术字字体 */
        font-size: 2.5em; /* 时间字体大小 */
        margin: 0; /* 确保没有额外的外边距 */
        line-height: 1.2; /* 调整行高以控制文字垂直居中 */
      }
      .date {
        font-family: 'Dancing Script', cursive; /* 艺术字字体 */
        font-size: 0.8em; /* 日期字体大小，调整为较小的大小 */
        margin: 0; /* 确保没有额外的外边距 */
        line-height: 1.2; /* 调整行高以控制文字垂直居中 */
      }
      .watch::before,
      .watch::after {
        content: '';
        position: absolute;
        background-color: var(--watch-color);
        z-index: -1;
      }
      .watch::after {
        inset: -0.5em 20%;
        border-radius: 0.5em;
        background-image: linear-gradient(
          #fff0,
          hsl(0 0% 0% / 0.5) 0.5em calc(100% - 0.5em),
          #fff0
        );
      }
      .watch::before {
        inset: -50vh 25%;
        background-image: repeating-linear-gradient(
            #fff0 0 0.3em,
            hsl(0 0% 0% / 0.125) 0.3em 0.5em,
            #fff0 0.5em 0.8em
          ),
          radial-gradient(circle, #fff0, hsl(0 0% 0% / 0.25) 50%);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 1em;
        min-height: 100vh;
        background-color: #1d1e22;
        display: grid;
        place-items: center;
        overflow: hidden;
      }

      /* 媒体查询：平板和移动设备 */
      @media (max-width: 768px) {
        .watch {
          font-size: 6vw; /* 调整手表大小 */
          padding: 3em 1.5em; /* 调整padding以适应更小的屏幕 */
          width: auto; /* 允许自动调整宽度 */
          height: auto; /* 允许自动调整高度 */
        }
        .time {
          font-size: 6vw; /* 调整时间字体大小 */
        }
        .date {
          font-size: 3.5vw; /* 调整日期字体大小 */
        }
      }

      /* 媒体查询：超小屏设备 */
      @media (max-width: 480px) {
        .watch {
          font-size: 8vw; /* 调整手表大小 */
          padding: 2em 1em; /* 调整padding以适应更小的屏幕 */
        }
        .time {
          font-size: 8vw; /* 调整时间字体大小 */
        }
        .date {
          font-size: 3.5vw; /* 调整日期字体大小 */
        }
      }
    </style>
  </head>
  <body>
    <div class="watch">
      <div class="time"></div>
      <div class="date"></div>
    </div>

    <script>
      function clock() {
        const date = new Date();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        const dayOfWeek = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
        const romanMonths = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
        const month = romanMonths[date.getMonth()];
        const dayNum = date.getDate();
        const formattedDate = `星期${dayOfWeek}, ${month}月${dayNum}日`;

        document.querySelector('.watch .time').innerHTML = formattedTime;
        document.querySelector('.watch .date').innerHTML = formattedDate;

        requestAnimationFrame(clock);
      }
      clock();
    </script>
  </body>
</html>
代码来自前端嘛公众号
评语 (0)
