CSS ｜自制⏰

每天学习一个css小技巧：简约风⏰ 效果图：

代码：

html:

<div class="clock">
  <div class="hand hours"></div>
  <div class="hand minutes"></div>
  <div class="hand seconds"></div>
  <div class="point"></div>
  <div class="marker">
    <span class="marker__1"></span>
    <span class="marker__2"></span>
    <span class="marker__3"></span>
    <span class="marker__4"></span>
  </div>
</div>

css:

/* 定义一些常量，方便使用和修改 */
:root {
    --primary-light: #8abdff;
    --primary: #6d5dfc;
    --primary-dark: #5b0eeb;
    --white: #FFFFFF;
    --greyLight-1: #E4EBF5;
    --greyLight-2: #c8d0e7;
    --greyLight-3: #bec8e4;
    --greyDark: #9baacf;
  }

  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }

  html {
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    background: var(--greyLight-1);
  }

  /*  CLOCK  */
	/* 表盘 */
  .clock {
    position: absolute;
    top: 100px;
    left: 40%;
    grid-column: 3/3;
    grid-row: 1/3;
    width: 12rem;
    height: 12rem;
    justify-self: center;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .clock .hand {
    position: absolute;
    transform-origin: bottom;
    bottom: 6rem;
    border-radius: 0.2rem;
    z-index: 200;
  }
	/* 时针 */ 
  .clock .hours {
    width: 0.4rem;
    height: 3.2rem;
    background: var(--greyLight-3);
  }
	/* 分针 */
  .clock .minutes {
    width: 0.4rem;
    height: 4.6rem;
    background: var(--greyDark);
  }
	/* 秒针 */
  .clock .seconds {
    width: 0.2rem;
    height: 5.2rem;
    background: var(--primary);
  }
	/* 中心点 */
  .clock .point {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--primary);
    z-index: 300;
  }
	/* 12，3，6，9刻度 */
  .clock .marker {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  }
  .clock .marker::after {
    content: "";
    width: 60%;
    height: 60%;
    position: absolute;
    box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
    border-radius: 50%;
    top: 20%;
    left: 20%;
    filter: blur(1px);
  }
  .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {
    position: absolute;
    border-radius: 0.1rem;
    box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
  }
  .clock .marker__1, .clock .marker__2 {
    width: 0.2rem;
    height: 0.6rem;
    left: 5.6rem;
  }
  .clock .marker__3, .clock .marker__4 {
    width: 0.6rem;
    height: 0.2rem;
    top: 5.6rem;
  }
  .clock .marker__1 {
    top: 2%;
  }
  .clock .marker__2 {
    top: 98%;
    transform: translateY(-0.6rem);
  }
  .clock .marker__3 {
    left: 2%;
  }
  .clock .marker__4 {
    left: 98%;
    transform: translateX(-0.6rem);
  }

css的思路就是表盘，指针，中心点，刻度等分开完成基本上都是用过的属性，当然也有几个第一次见：grid-column、grid-row、transform-origin等等，真的是看得越多，越觉得自己是个zz

js:

// 
const hours = document.querySelector('.hours');
  const minutes = document.querySelector('.minutes');
  const seconds = document.querySelector('.seconds');

  clock = () => {
    let today = new Date();
    let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm
    let m = today.getMinutes(); // 0 - 59
    let s = today.getSeconds(); // 0 - 59

    h *= 30; // 12 * 30 = 360deg
    m *= 6;
    s *= 6; // 60 * 6 = 360deg

    rotation(hours, h);
    rotation(minutes, m);
    rotation(seconds, s);

    // call every second
    setTimeout(clock, 500);
  }

  rotation = (target, val) => {
    target.style.transform =  `rotate(${val}deg)`;
  }

  window.onload = clock();

新知识点：

grid-column

grid-row:

transform-origin