论坛 › 【在水一方】 › 竹篱笆外野菊花@诺北

潇然 发表于 2022-3-22 11:14

竹篱笆外野菊花@诺北

<iframe width="720" height="405" frameborder="0" src="https://www.ixigua.com/iframe/7049714222393098760?autoplay=1" referrerpolicy="unsafe-url" allowfullscreen></iframe>

潇然 发表于 2022-3-22 11:15

竹篱笆外野菊花，送给当年的小丫丫

诺北 发表于 2022-3-22 11:26

潇然 发表于 2022-3-22 11:15
竹篱笆外野菊花，送给当年的小丫丫

;P现在升级为大妈了

潇然 发表于 2022-3-22 13:33

诺北 发表于 2022-3-22 11:26
现在升级为大妈了

仍然是丫丫

潇然 发表于 2022-3-22 13:34

<style type="text/css">
.numClock {
      margin: auto;
      width: 20em;
      height: 20em;
      background: rgba(240, 248, 255, .6);
      border: 1.2em solid #2f4f4f;
      border-radius: 50%;
      position: relative;
}
.numClock::before {
      content: "中画网";
      position: absolute;
      width: 100%;
      text-align: center;
      top: 70%;
}
.numBox {
      position: absolute;
      width: 1.5em;
      height: 1.5em;
      font-family: 'Microsoft Yahei', Sans-Seri;
      font-size: 1.5em;
      left: calc(50% - 0.75em);
      top: calc(50% - 0.75em);
      background: transparent;
      text-align:center;
}
.numBox span { display: inline-block; }
.hHand,.mHand,.sHand { position: absolute; width: 100%; height: 100%; background: transparent;}
.hr-hand, .min-hand,.sec-hand {
      position: absolute;
      bottom: 50%;
      transform-origin: 50% 100%;
}
.hr-hand {
      background: #2f4f4f;
      width: 0.4em;
      height: 30%;
      left: calc(50% - 0.2em);
      animation: tRun 43200s linear infinite;
}
.hr-hand::after {
      content: "";
      position: absolute;
      width: 0; height: 0;
      border: 0.5em solid;
      border-color: transparent transparent #2f4f4f transparent;
      right: -0.3em;
      bottom: 100%;
}
.min-hand {
      background: #2f4f4f;
      width: 0.3em;
      height: 42%;
      left: calc(50% - 0.15em);
      animation: tRun 3600s linear infinite;
}
.sec-hand {
      background: #d00;
      width: 0.2em;
      height: 48%;
      left: calc(50% - 0.1em);
      border-radius: 60% 60% 20% 20%;
      animation: tRun 60s linear infinite;
}
.sec-hand::before {
      content: "";
      position: absolute;
      bottom: -0.3em;
      left: -0.3em;
      width: 0.8em;
      height: 0.8em;
      border-radius: 50%;
      background: red;
}
@keyframes tRun { to { transform: rotate(1turn);} }
</style>

<div class="numClock">
      <div class="hHand">
                <div class="hr-hand"></div>
      </div>
      <div class="mHand">
                <div class="min-hand"></div>
      </div>
      <div class="sHand">
                <div class="sec-hand"></div>
      </div>
</div>

<script language="javascript">

var now = new Date();
var      hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
      min = now.getMinutes(),
      sec = now.getSeconds(),
      msec = now.getMilliseconds();
var      hDeg = hr * 30 + (min * 6 / 12),
      mDeg = min * 6 + (sec * 6 / 60),
      sDeg = sec * 6 + (msec * 0.36 / 1000);

addNum();
godPush("hHand", hDeg);
godPush("mHand", mDeg);
godPush("sHand", sDeg);

function godPush(ele, deg) {
      document.querySelector("." + ele).style.transform = "rotate(" + deg + "deg)";
}

function addNum() {
      var nStr = "";
      for(j=0;j<12;j++) {
                nStr += "<div class='numBox' style='transform: rotate(" + j*30 + "deg) translateY(-5.8em);'><span style='transform: rotate(-" + j*30 + "deg);'>" + (j == 0 ? "12" : j) + "</span></div>";
      }
      document.querySelector(".numClock").innerHTML = nStr + document.querySelector(".numClock").innerHTML;
}
</script>

非常开心 发表于 2022-3-22 13:48

欣赏老师佳作。点赞！

潇然 发表于 2022-3-22 14:16

非常开心 发表于 2022-3-22 13:48
欣赏老师佳作。点赞！

你的点赞俺非常开心;P

诺北 发表于 2022-3-22 15:13

潇然 发表于 2022-3-22 13:33
仍然是丫丫
;P现在我家小丫头是小丫丫了

蓝魔 发表于 2022-3-22 17:36

欣赏一下，谢谢。

潇然 发表于 2022-3-31 15:31

诺北 发表于 2022-3-22 15:13
现在我家小丫头是小丫丫了

哈哈，也对，不过你仍然很嫩;P

查看完整版本: 竹篱笆外野菊花@诺北