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 implementation plan of Vue front-end exporting Excel files
Table of contents 1. Technology Selection 2. Tech...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...
A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service
background: I have done a project before, which r...
Detailed steps for deploying https websites and configuring address rewriting in Nginx
Nginx is a high-performance website server and re...
Use render function to encapsulate highly scalable components
need: In background management, there are often d...
WeChat applet realizes the effect of swiping left to delete list items
This article shares the specific code for WeChat ...
Detailed explanation of the use of this.$set in Vue
Table of contents Use of this.$set in Vue use Why...
CentOS 8 is now available
CentOS 8 is now available! CentOS 8 and RedHat En...
Detailed steps for porting busybox to build a minimal root file system
Busybox: A Swiss Army knife filled with small com...
Three ways to implement animation in CSS3
This is a test of the interviewee's basic kno...
JS, CSS and HTML to implement the registration page
A registration page template implemented with HTM...
MySQL5.7 single instance self-starting service configuration process
1.MySQL version [root@clq system]# mysql -v Welco...
Detailed tutorial on installing Nginx 1.16.0 under Linux
Because I have been tinkering with Linux recently...
5 Easy Ways to Free Up Space on Ubuntu
Preface Most people will probably perform this op...
Nginx source code compilation and installation process record
The installation of the rpm package is relatively...