HTML+CSS to achieve surround reflection loading effect
|
This article mainly introduces the implementation of surround reflection loading effects using html+css, as follows: First look at the effect (full code at the bottom):
Implementation (you can write step by step while watching the effect):※ Initialize first (direct copy):
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(7, 15, 26);
}
Flex layout, align child elements in the center. 1. Define tags:
<div class="container">
<span>Loading...</span>
<div class="circle">
<div class="ring"></div>
</div>
</div>
.container is the bottom-level box. 2. .container's css style:
.container{
position: relative;
height: 150px;
width: 250px;
-webkit-box-reflect:below 1px linear-gradient(transparent ,rgb(7, 15, 26));
}
-webkit-box-reflect: This property can achieve reflection effects. detailed. 3. The CSS style of .circle, the animation part can be temporarily commented out:
.circle{
position: relative;
margin: 0 auto;
height: 150px;
width: 150px;
background-color: rgb(13, 10, 37);
border-radius: 50%;
animation: zhuan 2s linear infinite;
}
@keyframes zhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
margin: 0 auto; centered. 4. Define a double pseudo-class, which is a small circle with the same color as the background, covering .circle:
.circle::after{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: rgb(7, 15, 26);
border-radius: 50%;
}
5. Define the blue ring effect. Because it is covered by the small circle in step 4, you can directly define a gradient blue circle to get the blue ring:
.ring{
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 150px;
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%);
border-radius: 75px 0 0 75px;
}
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); Gradient color, blue first, then transition to transparent color. 6. Define the small glowing ball on the ring:
.ring::after{
content: '';
position: absolute;
right: -5px;
top: -2.5px;
width: 15px;
height: 15px;
background-color: rgb(40, 124, 202);
box-shadow: 0 0 5px rgb(40, 151, 202),
0 0 10px rgb(40, 124, 202),
0 0 20px rgb(40, 124, 202),
0 0 30px rgb(40, 124, 202),
0 0 40px rgb(40, 124, 202),
0 0 50px rgb(40, 124, 202),
0 0 60px rgb(40, 124, 202),
0 0 60px rgb(40, 124, 202);
border-radius: 50%;
z-index: 1;
}
box-shadow: shadow. 7. Define the text loading:
.container>span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: rgb(20, 129, 202);
text-shadow: 0 0 10px rgb(20, 129, 202),
0 0 30px rgb(20, 129, 202),
0 0 60px rgb(20, 129, 202),
0 0 100px rgb(20, 129, 202);
font-size: 18px;
z-index: 1;
}
left: 50%; Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(7, 15, 26);
}
.container{
position: relative;
height: 150px;
width: 250px;
-webkit-box-reflect:below 1px linear-gradient(transparent ,rgb(7, 15, 26));
}
.container>span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: rgb(20, 129, 202);
text-shadow: 0 0 10px rgb(20, 129, 202),
0 0 30px rgb(20, 129, 202),
0 0 60px rgb(20, 129, 202),
0 0 100px rgb(20, 129, 202);
font-size: 18px;
z-index: 1;
}
.circle{
position: relative;
margin: 0 auto;
height: 150px;
width: 150px;
background-color: rgb(13, 10, 37);
border-radius: 50%;
animation: zhuan 2s linear infinite;
}
@keyframes zhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.circle::after{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: rgb(7, 15, 26);
border-radius: 50%;
}
.ring{
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 150px;
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%);
border-radius: 75px 0 0 75px;
}
.ring::after{
content: '';
position: absolute;
right: -5px;
top: -2.5px;
width: 15px;
height: 15px;
background-color: rgb(40, 124, 202);
box-shadow: 0 0 5px rgb(40, 151, 202),
0 0 10px rgb(40, 124, 202),
0 0 20px rgb(40, 124, 202),
0 0 30px rgb(40, 124, 202),
0 0 40px rgb(40, 124, 202),
0 0 50px rgb(40, 124, 202),
0 0 60px rgb(40, 124, 202),
0 0 60px rgb(40, 124, 202);
border-radius: 50%;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<span>Loading...</span>
<div class="circle">
<div class="ring"></div>
</div>
</div>
</body>
</html>
Summarize:This is the end of this article about how to use html+css to achieve surround reflection loading effects. For more relevant html+css surround reflection loading content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Display special symbols in HTML (with special character correspondence table)
>>: Pure HTML+CSS to achieve typing effect
Recommend
Detailed explanation of multiple implementation methods of Mysql counting by conditions
Recently, I was adding a series of statistical fu...
MySQL 5.6.33 installation and configuration tutorial under Linux
This tutorial shares the installation and configu...
Mysql timeline data to obtain the first three data of the same day
Create table data CREATE TABLE `praise_info` ( `i...
Ubuntu View and modify mysql login name and password, install phpmyadmin
After installing MySQL, enter mysql -u root -p in...
Detailed explanation of the command mode in Javascript practice
Table of contents definition structure Examples C...
Modify the boot time of grub in ubuntu
The online search to modify the grub startup time...
After the click event of html hyperlink a, jump to the address pointed to by href
Sometimes, we need to use the hyperlink <a> ...
MySQL Binlog Data Recovery: Detailed Explanation of Accidentally Deleting a Database
MySQL Bin log data recovery: accidentally delete ...
Analysis of the problems and solutions encountered in importing large amounts of data into MySQL
In the project, we often encounter the problem of...
How to create, start, and stop a Docker container
1. A container is an independently running applic...
A brief discussion on the built-in traversal methods of JS arrays and their differences
Table of contents forEach() (ES6) method map() (E...
The marquee tag in HTML achieves seamless scrolling marquee effect
The <marquee> tag is a tag that appears in ...
Steps for Vue to use Ref to get components across levels
Vue uses Ref to get component instances across le...
Detailed Tutorial on Using xargs Command on Linux
Hello everyone, I am Liang Xu. When using Linux, ...
Solve the problem of inconsistent MySQL storage time
After obtaining the system time using Java and st...