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
How to limit access frequency, download rate and number of concurrent connections in Nginx
1. Overview of modules and instructions used to l...
Common writing examples for MySQL and Oracle batch insert SQL
Table of contents For example: General writing: S...
Use of Linux stat command
1. Command Introduction The stat command is used ...
Example code for implementing anti-shake in Vue
Anti-shake: Prevent repeated clicks from triggeri...
How to encapsulate query components based on element-ui step by step
Table of contents Function Basic query functions ...
Detailed explanation of Vue's live broadcast function
Recently, the company happened to be doing live b...
vue element el-transfer adds drag function
The Core Asset Management Project requires el-tra...
Advanced explanation of javascript functions
Table of contents Function definition method Func...
Vue project realizes login and registration effect
This article example shares the specific code of ...
How to capture exceptions gracefully in React
Table of contents Preface ErrorBoundary Beyond Er...
Detailed explanation of the meaning of N and M in the MySQL data type DECIMAL(N,M)
A colleague asked me what N and M mean in the MyS...
Detailed explanation of viewing and setting file permissions on Mac
Preface To modify file permissions in the termina...
Awk command line or script that helps you sort text files (recommended)
Awk is a powerful tool that can perform some task...
Vue state management: using Pinia instead of Vuex
Table of contents 1. What is Pinia? 2. Pinia is e...
How to solve the problem of ERROR 2003 (HY000) when starting mysql
1. Problem Description When starting MYSQL, a pro...