CSS | homemade ⏰

Learn a CSS tip every day: simple style ⏰

Code:

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>
Copy the code

css:

/* Define some constants for easy use and modification */
: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 */
	/ * * / dial
  .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.3 rem 0.3 rem 0.6 rem var(--greyLight-2), -0.2 rem -0.2 rem 0.5 rem 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.2 rem;
    z-index: 200;
  }
	/ * clockwise * / 
  .clock .hours {
    width: 0.4 rem;
    height: 3.2 rem;
    background: var(--greyLight-3);
  }
	/ * minute hand * /
  .clock .minutes {
    width: 0.4 rem;
    height: 4.6 rem;
    background: var(--greyDark);
  }
	/ * the second hand * /
  .clock .seconds {
    width: 0.2 rem;
    height: 5.2 rem;
    background: var(--primary);
  }
	/* Center point */
  .clock .point {
    position: absolute;
    width: 0.8 rem;
    height: 0.8 rem;
    border-radius: 50%;
    background: var(--primary);
    z-index: 300;
  }
	/* 12,3,6,9 scale */
  .clock .marker {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0.2 rem 0.2 rem 0.5 rem var(--greyLight-2), inset -0.2 rem -0.2 rem 0.5 rem 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.1 rem;
    box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
  }
  .clock .marker__1..clock .marker__2 {
    width: 0.2 rem;
    height: 0.6 rem;
    left: 5.6 rem;
  }
  .clock .marker__3..clock .marker__4 {
    width: 0.6 rem;
    height: 0.2 rem;
    top: 5.6 rem;
  }
  .clock .marker__1 {
    top: 2%;
  }
  .clock .marker__2 {
    top: 98%;
    transform: translateY(-0.6 rem);
  }
  .clock .marker__3 {
    left: 2%;
  }
  .clock .marker__4 {
    left: 98%;
    transform: translateX(-0.6 rem);
  }
Copy the code

Grid-column, grid-row, transform-Origin, etc. The more I see, the more I feel like I’m zz

js:

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

  clock = () = > {
    let today = new Date(a);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();
Copy the code

New knowledge:

grid-column

grid-row:

transform-origin