CSS implementation of beautiful clock animation effect example code

Time:2021-9-17

在这里插入图片描述

I want to find a job!!!

Pre preparation:

First, this animation is based on the previous loading animation,Loading cool animation, these ideas are the same, and an innovation has been made in this animation.

Preview knowledge points:

  • Animation frame
  • background gradient
  • Use of var() and calc()
  • Flex layout scenario
  • Multiple animation operations
  • Use of delayed animation

start

Core code analysis


transform: rotate(calc(30deg * var(--i)));
        transform-origin: 0 250px;
        animation: rotate 5s linear infinite;
        animation-delay: calc(0.42s * var(--i));

According to the style style built on HTML, obtain each corresponding I value, and calculate the rotation degree of the box at each time. At the same time, we change their initial rotation point, otherwise each is just a central rotation and turns into a circle.

The idea is still the production idea of loading, but the size scale is enlarged this time,

在这里插入图片描述

HTML code construction:


<div class="box">
            <div class="color" style="--i:1">1</div>
            <div class="color" style="--i:2">2</div>
            <div class="color" style="--i:3">3</div>
            <div class="color" style="--i:4">4</div>
            <div class="color" style="--i:5">5</div>
            <div class="color" style="--i:6">6</div>
            <div class="color" style="--i:7">7</div>
            <div class="color" style="--i:8">8</div>
            <div class="color" style="--i:9">9</div>
            <div class="color" style="--i:10">10</div>
            <div class="color" style="--i:11">11</div>
            <div class="color" style="--i:12">12</div>
            <div class="hours"></div>
            <div class="mintues"></div>
        </div>

Less code:


* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background: -webkit-linear-gradient(left top, pink, rgb(90, 83, 83));
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;

  section {
    height: 500px;
    width: 500px;
    .box {
      position: relative;
      height: 500px;
      width: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 5px solid #e2adb6;
      border-radius: 50%;
      // border: 2px solid red;
      &:hover .color {
        animation-play-state: paused;
      }

      &::after {
        content: "";
        display: block;
        height: 25px;
        width: 25px;
        background-color: #000;
        z-index: 4;
        border-radius: 50%;
      }

      @keyframes rotate {
        0%,
        50% {
          text-shadow: none;
          color: #000;
          transform: rotate(calc(30deg * var(--i))) scale(1);
        }

        50.1%,
        100% {
          text-shadow: 0 0 10px #000,
            0 0 15px #000;
          color: #fff;
          transform: rotate(calc(30deg * var(--i))) scale(1.01);
        }
      }

      .color {
        position: absolute;
        top: 0;
        color: #f2f2f2;
        opacity: .6;
        font-size: 20px;
        transform: rotate(calc(30deg * var(--i)));
        transform-origin: 0 250px;
        line-height: 50px;
        animation: rotate 5s linear infinite;
        animation-delay: calc(0.42s * var(--i));
      }

      @keyframes change1 {
        0% {
          transform: translateY(-50%) rotate(0deg);
          transform-origin: 0 100px;
        }

        100% {
          transform: translateY(-50%) rotate(360deg);
          transform-origin: 0 100px;
        }
      }

      @keyframes change2 {
        0% {
          transform: translateY(-50%) rotate(-30deg) rotate(0deg);
          transform-origin: 0 150px;
        }

        100% {
          transform: translateY(-50%) rotate(-30deg) rotate(360deg);
          transform-origin: 0 150px;
        }
      }

      .hours {
        position: absolute;
        top: 40%;
        width: 5px;
        transform: translateY(-50%);
        height: 100px;
        background-color: #f2f2f2;
        animation: change1 24s linear infinite;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          width: 20px;
          height: 20px;
          border-bottom: 5px solid #f2f2f2;
          border-right: 5px solid #f2f2f2;
          transform: rotate(-135deg);
        }
      }

      .mintues {
        position: absolute;
        top: 36%;
        width: 3px;
        height: 150px;
        background-color: #000;
        transform: translateY(-50%) rotate(-30deg);
        transform-origin: 0 150px;
        animation: change2 2s linear infinite;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: -10px;
          // display: block;
          width: 20px;
          height: 20px;
          border-bottom: 3px solid #000;
          border-right: 3px solid #000;
          transform: rotate(-135deg);
        }
      }
    }
  }
}

This is the end of this article about the example code of CSS to achieve beautiful clock animation effect. For more information about CSS clock animation, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]