ikun自用表盘《背带裤》

掘金制作人们大家好，我是练习css时长两年半的个人练习生ikun，喜欢html，css，js……在今后的日子中，我还准备了很多我自己的原创作品，期待的话，请多多为我在码上掘金编程挑战赛投票吧。

灵感源于B站一则ikun牌手表的视频。

先看下项目的最终效果：

开发时钟

简单时钟

时钟的基本结构如下

//DOM
<div class="clock">
    <div class="hours">
        <div class="hour" id="hour"></div>
    </div>
    <div class="minutes">
        <div class="minute" id="minute"></div>
    </div>
    <div class="seconds">
        <div class="second" id="second"></div>
    </div>
</div>

// JS
const deg = 6;
const hr = document.querySelector('#hour');
const mn = document.querySelector('#minute');
const sc = document.querySelector('#second');

setInterval(()=>{
    let day = new Date();
    let hh = day.getHours() * 30; //当前Hour
    let mm = day.getMinutes() * deg; //当前Minute
    let ss = day.getSeconds() * deg; //当前Second
    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;
});

//CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #282828;
}
.clock{
    display: flex;
    width: 400px;
    height: 400px;
    justify-content: center;
    align-items: center;
    border: 4px solid #191919;
    border-radius: 50%;
    box-shadow: -4px -4px 10px rgba(67, 67, 67, .5),
            inset 4px 4px 10px rgba(0, 0, 0, .5),
            inset -4px -4px 10px rgba(67, 67, 67, .3);
}
.clock::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgb(245, 245, 0);
    border-radius: 50%;
    z-index: 999;
}
.clock .hours,
.clock .minutes,
.clock .seconds{
    position: absolute;
}
.clock .hours, .hour{
    width: 160px;
    height: 160px;
}
.clock .minutes, .minute{
    width: 190px;
    height: 190px;
}
.clock .seconds, .second{
    width: 230px;
    height: 230px;
}
.hour, .minute, .second{
    display: flex;
    justify-content: center;
    position: absolute;
    border-radius: 50%;
}
.hour::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #ff0080;
    border-radius: 6px 6px 0 0;
    z-index: 9;
}
.minute::before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #6ec5ff;
    border-radius: 6px 6px 0 0;
    z-index: 10;
}

.second::before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #fa0000;
    border-radius: 6px 6px 0 0;
    z-index: 11;
}

实现基本效果：

添加刻度盘

/* DOM */
 <div class="clock" id="clock">
  <ul class="line-min"></ul>
  <ul class="line-hour"></ul>
  <div class="hours">
    <div class="hour" id="hour"></div>
  </div>
  <div class="minutes">
    <div class="minute" id="minute"></div>
  </div>
  <div class="seconds">
    <div class="second" id="second"></div>
  </div>
  <div id="ballWrapper">
    <div id="ball"><span id="ballshad"></span>
    </div>
  </div>
</div>

/* JS */
    function drawLines(className, total, translateX) {
      const gap = 360 / total;
      let strHtml = '';
      for (let i = 0; i < total; i++) {
        strHtml += `<li style="transform:rotate(${i * gap}deg) translate(${translateX}px,-50%);"></li>`;
      }
      const wrap = document.getElementsByClassName(className)[0];
      wrap.innerHTML = strHtml;
    }

    drawLines('line-min', 60, 185);
    drawLines('line-hour', 12, 175);


/* CSS */
/* 刻度盘 */
.line-hour li,
.line-min li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background-color: #FFF;
  list-style: none;
}

.line-hour li {
  width: 16px;
  height: 2px;
}

.line-min li {
  width: 5px;
  height: 2px;
}

实现效果：

模式一：背带异常模式

名词解释

背带异常模式，顾名思义，即kunkun背上的背带错位，导致异常。kunkun的三条背带正好对应时钟的时、分、秒三指针。而背带裤中间棕色的🔗正对应时钟的中心点。

素材制作

首先呢，我们需要一张kunkun的背影图片。我截取了一张b站的高清图片，当作背景图再从背景图中截取一张小图，通过PS把背带P掉，当作时钟的背景图。分别给Clock盒子和他的父盒子添加上这两张图片，调整下合适的位置，更换一下背带的颜色。大功告成！效果如下：

模式二：铁山靠+篮球

模式一中的kunkun有些呆，我想让其动起来，能释放铁山靠的绝技，最好可以和篮球结合在一起，以此为开发思路。

名词解释

铁山靠是ikun必学技能之一，是通过腰腹力量连续两次作出顶肩动作，短短数秒的时间能爆发出巨大威力。

素材制作

铁山靠需要我们把背景图做成gif来进行播放，而制作gif的方案之一是通过帧转gif。我们首先在b站高清视频中截取数张图片，在这里我截取了14张。将其导入PS，并将每张图片的背带P掉。图片批量导出，通过gif制作网站生成gif。将其替换掉clock的背景图。效果如下：

篮球

思路：在铁山靠的时候将篮球顶出，反弹回来后，再通过铁山靠顶出。

/* DOM*/
   <div class="container">
    <div class="clock" id="clock">
      <ul class="line-min"></ul>
      <ul class="line-hour"></ul>
      <div class="hours">
        <div class="hour" id="hour"></div>
      </div>
      <div class="minutes">
        <div class="minute" id="minute"></div>
      </div>
      <div class="seconds">
        <div class="second" id="second"></div>
      </div>
      /* 篮球 */
      <div id="ballWrapper">
        <div id="ball"><span id="ballshad"></span>
        </div>
      </div>
    </div>
  </div>

      
 /* CSS */
 /* 篮球 */
    #ballWrapper {
      width: 300px;
      height: 100px;
      display: block;
      position: absolute;
      cursor: pointer;
      right: -240px;
      top: 150px;
    }

    #ball {
      width: 70px;
      height: 70px;
      position: relative;
      animation: jump 1s infinite;
      overflow: hidden;
    }

    #ball:after {
      content: "";
      width: 70px;
      height: 70px;
      border-radius: 100%;
      background: url("./ball.svg");
      position: absolute;
      animation: rotate 2s infinite, back 1s infinite;
      z-index: 5;
      background-repeat: repeat;
      background-size: cover;
      animation-timing-function: linear;
    }


        @keyframes jump {
      0% {
        right: 0px;
        transform: scale3d(1.3, .8, 1);

        border-radius: 100%;
        animation-timing-function: ease-out;
      }
      5% {
        transform: scale3d(1, 1, 1);
      }

      45% {
        transform: scale3d(1, 1, 1);
      }

      50% {
        right: -300px;
        animation-timing-function: ease-in;
        transform: scale3d(1, 1, 1);
      }
      
      60% {
        transform: scale3d(.8, 1.1, 1);
      }

      70% {
        transform: scale3d(.95, 1.05, 1);
      }

      72% {
        transform: scale3d(1, 1, 1);
      }

      100% {
        transform: scale3d(1, 1, 1);
        right: 0px;
        border-radius: 100%;
      }
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

实现效果：

模式三：背带正常模式

背带裤正常模式，即在一个特定的时间点，时分秒针和显示中背带角度重合。经过测试这个时间是14:56:31，因此该模式下只需调整js内容即可。

模式切换

思路来源：做三个按钮，来回切换实现水波纹的效果。具体实现可以参考这篇文章：听说这个动效可以玩一天

实现效果：

项目体验

https://code.juejin.cn/pen/7161794013429760007