子比主题 – 侧边栏动态时间小工具

给大家带来一款子比主题的侧边栏动态时间小工具，这个小工具的效果还是比较炫酷的，当然每个人的眼光不同，有喜欢的可以自行部署。
演示效果：

代码部署：
本文隐藏内容
操作步骤：后台小工具→自定义HTML

<style>
  .times {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .times2 {
    height: 100%;
    background: #fff;
  }

  .times2 svg {
    height: 100%;
    width: 100%;
    margin-bottom: -34px;
  }

  .words {
    font-size: 60px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 5px;
    stroke-dasharray: 90, 310;
    animation: drawing 8s linear infinite;
  }

  .words-1 {
    stroke: deepskyblue;
    text-shadow: 0 0 50px deepskyblue;
    animation-delay: -2s;
  }

  .words-2 {
    stroke: lightseagreen;
    text-shadow: 0 0 50px lightseagreen;
    animation-delay: -4s;
  }

  .words-3 {
    stroke: orange;
    text-shadow: 0 0 50px orange;
    animation-delay: -6s;
  }

  .words-4 {
    stroke: purple;
    text-shadow: 0 0 50px purple;
    animation-delay: -8s;
  }

  @keyframes drawing {
    100% {
      stroke-dashoffset: -400;
    }
  }
</style>

<div class="sidebox sidebox--desk">
  <div class="times">
    <div class="sidebox__content" style="padding: 0;">
      <div  style="border-radius:15px;" class="times2">
        <svg>
          <text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>
          <text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>
        </svg>
      </div>
    </div>
  </div>
</div>

<script>
  function showtime() {
    const now = new Date();
    let h = now.getHours();
    let m = now.getMinutes();
    let s = now.getSeconds();
    h = checktime(h);
    m = checktime(m);
    s = checktime(s);
    return `${h}:${m}:${s}`;
  }

  function checktime(x) {
    return x < 10 ? `0${x}` : x;
  }

  const texts = document.querySelectorAll("text");

  setInterval(() => {
    const time = showtime();
    texts.forEach(text => {
      text.textContent = time;
    });
  }, 1000);
</script>