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
Nginx location matching rule example
1. Grammar location [=|~|~*|^~|@] /uri/ { ... } 2...
The docker container directly runs to obtain the public IP operation through ping
Get the local public IP address through the conta...
Install mysql5.7.17 using RPM under Linux
The installation method of MySQL5.7 rpm under Lin...
MySQL 5.7.21 winx64 installation and configuration method graphic tutorial under Windows 10
mysql 5.7.21 winx64 installation and configuratio...
MySQL 5.7.27 installation and configuration method graphic tutorial
MySQL 5.7.27 detailed download, installation and ...
Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution
A few days ago, when I was adjusting a module of a...
How to install redis in Docke
1. Search for redis image docker search redis 2. ...
Vue implements adding watermark to uploaded pictures
This article shares the specific implementation c...
How to implement nginx smooth restart
1. Background During the server development proce...
Detailed explanation of how to install centos7 using win10's built-in virtual machine hyper-v
1. Install the virtual machine hyper-v that comes...
Detailed explanation of the use of MySQL mysqldump
1. Introduction to mysqldump mysqldump is a logic...
MySQL master-slave synchronization mechanism and synchronization delay problem tracking process
Preface As a DBA, you will often encounter some M...
Use of docker system command set
Table of contents docker system df docker system ...
Docker commands are implemented so that ordinary users can execute them
After installing docker, there will usually be a ...
Sample code for modifying the input prompt text style in html
On many websites, we have seen the input box disp...