Example code for implementing beautiful clock animation effects with CSS
|
I'm looking for a job!!! Advance preparation:First of all, this animation is made based on the previous Loading animation and the cool Loading animation. The ideas are the same, and an innovation was made in this animation. Preview knowledge points:
startCore 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 built on HTML, we get each corresponding i value and calculate the degree of rotation of the box at each moment. At the same time, we change their initial rotation point, otherwise each one will just rotate around the center and turn into a circle. The idea is still the same as loading, but this time the size ratio is enlarged.
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 concludes this article about example code for implementing beautiful clock animation effects with CSS. For more relevant CSS clock animation content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Common JavaScript memory errors and solutions
>>: Detailed analysis of the chmod command to modify file permissions under Linux
Recommend
Detailed explanation of MySQL master-slave database construction method
This article describes how to build a MySQL maste...
Solution for VMware Workstation Pro not running on Windows
After the National Day holiday, did any of you fi...
A brief explanation of the reasonable application of table and div in page design
At the beginning of this article, I would like to ...
Practical TypeScript tips you may not know
Table of contents Preface Function Overloading Ma...
Implementation of CSS fixed layout on both sides and adaptive layout in the middle
Analyze four common methods and principles: float...
MySql COALESCE function usage code example
COALESCE is a function that refers to each parame...
A case study to thoroughly understand how to correctly use MySQL inndb joint index
There is a business that queries the 5 most recen...
Detailed explanation of BOM and DOM in JavaScript
Table of contents BOM (Browser Object Model) 1. W...
Detailed explanation of the use of MySQL DML statements
Preface: In the previous article, we mainly intro...
Docker container exits after running (how to keep running)
Phenomenon Start the Docker container docker run ...
React Fragment Introduction and Detailed Usage
Table of contents Preface Motivation for Fragment...
How to solve the problem of ERROR 2003 (HY000) when starting mysql
1. Problem Description When starting MYSQL, a pro...
Summary of Linux Logical Volume Management (LVM) usage
Managing disk space is an important daily task fo...
Several ways to run Python programs in the Linux background
1. The first method is to use the unhup command d...
Docker View the Mount Directory Operation of the Container
Only display Docker container mount directory inf...