CSS3(二十一) CSS3 自定义时钟和炫酷导航
CSS3
CSS3
发布日期:   2020-05-16
更新日期:   2020-05-24
文章字数:   1k
阅读时长:   6 分
阅读次数:  

自定义时钟

代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>自定义时钟</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    ul {
      list-style-type: none;
    }
    .wrap {
      width: 400px;
      height: 400px;
      margin: 100px auto;
      position: relative;
    }
    #clock {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 0px;
      top: 0px;
      border: 1px solid #000;
      border-radius: 50%;
    }
    #clock li {
      position: absolute;
      left: 198px;
      top: 0px;
      width: 2px;
      height: 8px;
      background: #000000;
      -webkit-transform-origin: center 200px;
    }
    /*#clock li:nth-of-type(1){-webkit-transform: rotate(0deg);}*/
    /*#clock li:nth-of-type(2){-webkit-transform: rotate(6deg);}*/
    /*#clock li:nth-of-type(3){-webkit-transform: rotate(12deg);}*/
    /*#clock li:nth-of-type(4){-webkit-transform: rotate(18deg);}*/
    /*#clock li:nth-of-type(5){-webkit-transform: rotate(24deg);}*/
    /*#clock li:nth-of-type(6){-webkit-transform: rotate(32deg);}*/
    #clock li:nth-of-type(5n + 1) {
      height: 16px;
    }
    #icon {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 190px;
      top: 190px;
      border: 1px solid #000000;
      border-radius: 50%;
      background: #000000;
      -webkit-transform-origin: bottom;
    }
    #hour {
      width: 4px;
      height: 80px;
      background: #000;
      position: absolute;
      left: 198px;
      top: 120px;
      -webkit-transform-origin: bottom;
      border: 1px solid #000;
    }
    #min {
      width: 4px;
      height: 100px;
      background: blue;
      position: absolute;
      left: 198px;
      top: 100px;
      -webkit-transform-origin: bottom;
      border: 1px solid blue;
    }
    #sec {
      width: 2px;
      height: 140px;
      background: red;
      position: absolute;
      left: 199px;
      top: 60px;
      -webkit-transform-origin: bottom;
      border: 1px solid red;
    }
  </style>
  <body>
    <div class="wrap">
      <ul id="clock"></ul>
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="icon"></div>
    </div>
  </body>
  <script>
    window.onload = function () {
      var Clock = document.getElementById('clock') //获取到UL合集
      var Hour = document.getElementById('hour') //获取到时针
      var Min = document.getElementById('min') //获取到分针
      var Sec = document.getElementById('sec') //获取到秒针
      /*开始创建节点*/
      var Liall = ''
      for (var i = 0; i < 60; i++) {
        Liall +=
          '<li style="-webkit-transform: rotate(' + i * 6 + 'deg);"></li>'
      }
      Clock.innerHTML = Liall
      function getresult() {
        var NowTime = new Date()
        var Nsec = Math.round(NowTime.getSeconds())
        var Nmin = Math.round(NowTime.getMinutes() + Nsec / 60)
        var Nhour = Math.round(NowTime.getHours() + Nmin / 60)
        var Secedg = Nsec * 6 //表示旋转的角度。因为秒针走一个格子旋转6度。表盘上60个格子。360/60 =6
        var Minedg = Nmin * 6
        var Houredg = Nhour * 30 // 360/12=30度 12个小时
        var EdgTime = { hour: Houredg, min: Minedg, sec: Secedg }
        return EdgTime
      }
      function domove(obj) {
        Hour.style['WebkitTransform'] = 'rotate(' + obj.hour + 'deg)'
        Min.style['WebkitTransform'] = 'rotate(' + obj.min + 'deg)'
        Sec.style['WebkitTransform'] = 'rotate(' + obj.sec + 'deg)'
      }
      setInterval(function () {
        var timer_result = getresult()
        domove(timer_result)
      }, 1000)
    }
  </script>
</html>

炫酷导航

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>旋转导航</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    #box {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      background: red;
    }
    .center {
      z-index: 1;
      transition: 3s;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #000;
      text-align: center;
      font-size: 24px;
      line-height: 50px;
      position: absolute;
      left: 0px;
      top: 0px;
      color: white;
    }
    h1 {
      cursor: pointer;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 42px;
      height: 42px;
      background: black;
      text-align: center;
      font-size: 24px;
      line-height: 42px;
      color: white;
      border-radius: 50%;
    }
  </style>
  <body>
    <div id="box">
      <p class="center">点</p>
      <h1 class="obj4">1</h1>
      <h1 class="obj4">2</h1>
      <h1 class="obj4">3</h1>
      <h1 class="obj4">4</h1>
      <h1 class="obj4">5</h1>
      <h1 class="obj4">6</h1>
      <h1 class="obj4">7</h1>
      <h1 class="obj4">8</h1>
      <h1 class="obj4">9</h1>
      <h1 class="obj4">10</h1>
      <h1 class="obj4">11</h1>
      <h1 class="obj4">12</h1>
    </div>
  </body>
  <script>
    window.onload = function () {
      var PointCenter = document.getElementsByClassName('center')[0] //获取到中心点
      var Oh1 = document.getElementsByTagName('h1')
      var iR = -150 //半径
      var flag = true
      for (var i = 0; i < Oh1.length; i++) {
        Oh1[i].onclick = function () {
          this.style.transition = '0.5s'
          this.style.WebkitTransform = ' scale(2) rotate(-720deg)'
          this.style.opacity = 0.1
          addEnd(this, end)
        }
      }
      /*点击完了后在变回来*/
      function addEnd(obj, fn) {
        obj.addEventListener('WebkitTransitionEnd', end)
        obj.addEventListener('transitionend', end)
      }
      function end() {
        this.style.transition = '1s'
        this.style.WebkitTransform = ' scale(1) rotate(-720deg)'
        this.style.opacity = 1
        removeEvent(this, end)
      }
      function removeEvent(obj, fn) {
        obj.removeEventListener('WebkitTransitionEnd', fn, false)
        obj.removeEventListener('transitionend', fn, false)
      }
      /*变回来结束*/
      PointCenter.onclick = function () {
        if (flag) {
          this.style['WebkitTransform'] = 'rotate(-360deg)'
          for (var i = 0; i < Oh1.length; i++) {
            var oLt = toLT(iR, (90 / 3) * i)
            Oh1[i].style.transition = '0.5s ' + i * 100 + 'ms' //每个都有延迟
            Oh1[i].style.left = oLt.l + 'px'
            Oh1[i].style.top = oLt.t + 'px'
            Oh1[i].style.WebkitTransform = 'scale(1) rotate(-360deg)'
          }
        } else {
          this.style['WebkitTransform'] = 'rotate(0deg)'
          for (var i = 0; i < Oh1.length; i++) {
            var oLt = toLT(iR, (90 / 3) * i)
            Oh1[i].style.transition = '0.5s ' + (Oh1.length - i) * 100 + 'ms' //每个都有延迟
            Oh1[i].style.left = 0 + 'px'
            Oh1[i].style.top = 0 + 'px'
            Oh1[i].style.WebkitTransform = 'scale(1) rotate(0deg)'
          }
        }
        flag = !flag
      }
      /*获取到坐标*/
      function toLT(iR, iDeg) {
        return {
          l: Math.round(Math.sin((iDeg / 180) * Math.PI) * iR),
          t: Math.round(Math.cos((iDeg / 180) * Math.PI) * iR),
        }
      }
    }
  </script>
</html>
文章作者: 雾烟云
文章链接: https://jsopy.gitee.io/2020/05/16/css321/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
CSS3
  目录