一款抖音超赞的时钟单页源码安装使用教程

呆呆 2020-4-25 0 3398

前段时间上抖音都在赞一款时钟效果，也不知道为何大家这样喜欢。这里呆呆就把代码贡献给大家一起来交流。代码可以在下方下载，如果需要编辑自己需要的效果千万不要用记事本打开编辑！！

抖音时钟单页

部分代码展示，使用请下载
<html>
 <head>
    <meta charset="UTF-8">
    <title>抖音时钟</title>
    <style>html{ background: #000; color: #769cdc; font-size: 12px; overflow:hidden; } *{ margin: 0; padding: 0; } span{ display: block; float: left; } .on{ color: #fff; } .wrapper{ width: 200px; height: 200px; position: absolute; left:50%; top:50%; margin-top: -100px; margin-left: -100px; } .wrapper .timebox{ position: absolute; width: 200px; height: 200px; top: 0; left:0; border-radius: 100%; transition: all 0.5s; } .timebox span{ transition: all 0.5s; float: left; } .wrapper .timebox span{ position: absolute; left:50%; top:50%; width: 40px; height: 18px; margin-top: -9px; margin-left: -20px; text-align: right; }</style></head>
  <body>
    <div id="wrapper">
      <div class="timebox yuebox" id="yueBox"></div>
      <div class="timebox riqiBox" id="riqiBox"></div>
      <div class="timebox hourbox" id="hourbox"></div>
      <div class="timebox minutebox" id="minutebox"></div>
      <div class="timebox secondbox" id="secondbox"></div>
    </div>
    <script>let wrapper = document.getElementById("wrapper");

      let yueBox = document.getElementById("yueBox");

      let riqiBox = document.getElementById("riqiBox");

      let hourbox = document.getElementById("hourbox");

      let minutebox = document.getElementById("minutebox");

      let secondbox = document.getElementById("secondbox");

      /*

好了这次文章就到这里了，有不懂可以留言哦！·呆呆blog-zaibk网络写本会及时回复的！~

提取码：kby5大小：4kb | 来源：百度网盘

已经过安全软件检测无毒，请您放心下载。

#仿站建站#