This article mainly introduces how to use html+css to realize the loading effect of surround reflection.
1. Realize Loading Effect Of Surround Reflection Example.
- Create a Html file implement_loading_effect_of_surround_reflection.html.
- Then copy the below Html + CSS source code into the above html file.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Implement Loading Effect Of Surround Reflection With Html & CSS</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; /* Use the flex layout. */ justify-content: center; align-items: center; /* Align child elements to the center. */ background-color: rgb(0, 255, 0); /* define the web page background color to green. */ } .container{ position: relative; height: 150px; width: 250px; -webkit-box-reflect:below 1px linear-gradient(transparent ,rgb(196, 17, 26)); /* -webkit-box-reflect:This property can realize the reflection effect. */ } .circle{ position: relative; margin: 0 auto; /* align center. */ height: 150px; width: 150px; background-color: rgb(255, 0, 0); /* define the circle border color to red. */ border-radius: 50%; /* radian of angle. */ animation: rotate_animation 2s linear infinite; /* Animate it to rotate. */ } @keyframes rotate_animation{ 0%{ transform: rotate(0deg); /* Set the rotation angle. */ } 100%{ transform: rotate(360deg); /* Set the rotation angle. */ } } /* Define a double pseudo-class, a small circle with the same background color, covered on .circle. */ .circle::after{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgb(0, 0, 255); /* define the circle background color to blue. */ border-radius: 50%; } /* Define the blue ring effect, because it is covered by the small circle, so 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(256, 19, 19) ,transparent 80%); /* linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); Gradient color, the color is blue at first, then transit to transparent color gradiently. */ border-radius: 75px 0 0 75px; } /* Defines the glowing sphere on the ring. */ .ring::after{ content: ''; position: absolute; right: -5px; top: -2.5px; width: 15px; height: 15px; background-color: rgb(255, 255, 0); /* defin the ball color to yellow. */ box-shadow: 0 0 5px rgb(40, 151, 202), /* define the box shadow. */ 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; /* display the ball on the top layer. */ } /* Define the loading text css style. */ .container>span{ position: absolute; left: 58%; top: 50%; transform: translate(-50%,-50%); /* align in center. */ color: rgb(20, 129, 202); text-shadow: 0 0 10px rgb(20, 129, 202), /* the text shadow. */ 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; } </style> </head> <body> <!-- the div element that use the .container class is the bottommost box. --> <div class="container"> <!-- the span element's content is the text of the loading animation. --> <span>Loading example...</span> <!-- the div that use the .circle class is the underlying circular box. --> <div class="circle"> <!-- the div that use the .ring css class is that blue ring. --> <div class="ring"></div> </div> </div> </body> </html>
- Open the above Html file in a web browser, then you can see the loading effect of surround reflection.
2. The Loading Effect Of Surround Reflection Demo Video.