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
MySQL 5.6 root password modification tutorial
1. After installing MySQL 5.6, it cannot be enabl...
Simply understand the differences in the principles of common SQL delete statements
This article mainly introduces the differences be...
How to write elegant JS code
Table of contents variable Use meaningful and pro...
VMware Workstation Pro 16 Graphic Tutorial on Building CentOS8 Virtual Machine Cluster
Table of contents Preparation Install VMware Work...
Mount the disk in a directory under Ubuntu 18.04
Introduction This article records how to mount a ...
Detailed tutorial for installing MySQL 8.0.22 on Redhat 7.3 (binary installation)
Table of contents 1. Download the MySQL installat...
A brief analysis of adding listener events when value changes in html input
The effect to be achieved In many cases, we will ...
How to optimize logic judgment code in JavaScript
Preface The logical judgment statements we use in...
Docker deploys mysql to achieve remote connection sample code
1.docker search mysql查看mysql版本 2. docker pull mys...
Summary of some common writing methods that cause MySQL index failure
Preface Recently, I have been busy dealing with s...
Problems encountered in the execution order of AND and OR in SQL statements
question I encountered a problem when writing dat...
In-depth explanation of Vue multi-select list component
A Multi-Select is a UI element that lists all opt...
js to implement file upload style details
Table of contents 1. Overview 2. Parameters for c...
Implementing a web calculator with native JavaScript
This article shares the specific code of JavaScri...
CSS menu button animation
To write a drop-down menu, click the button. The ...