Shulou(Shulou.com)06/03 Report--

Editor to share with you how CSS3 to achieve loading pre-loaded animation effects, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The loading effect has four different effects, which are accomplished by different CSS3 keyframes frame animations.

HTML structure

The HTML structures of the four loading preload animations are as follows:

CSS style

Then add the following CSS styles to each of them.

/ * KEYFRAMES * / @ keyframes spin {from {transform: rotate (0);} to {transform: rotate (359deg);}} @ keyframes configure-clockwise {0 {transform: rotate (0);} 25% {transform: rotate (90deg);} 50% {transform: rotate (180deg);} 75% {transform: rotate (270deg);} 100% {transform: rotate (359deg) } @ keyframes configure-xclockwise {0% {transform: rotate (45deg);} 25% {transform: rotate (- 45deg);} 50% {transform: rotate (- 135deg);} 75% {transform: rotate (- 215deg);} 100% {transform: rotate (- 305deg);}} @ keyframes pulse {from {opacity: 1; transform: scale (1);} to {opacity: .25 Transform: scale (.75);} / * GRID STYLING * / * {box-sizing: border-box;} body {min-height: 100vh; background-color: # 37474f; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}. Spinner-box {width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; background-color: transparent } / * SPINNING CIRCLE * / .circle-border {width: 150px; height: 150px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: rgb (63249220); background: linear-gradient (0deg, rgba (63Mague 249220pl 0.1) 33%, rgba (63Yue249220px1); animation: spin .8s linear 0s infinite;}. Circle-core {width: 100%; height: 100%; background-color: # 37474f Border-radius: 50%;} / * X-ROTATING BOXES * / .configure-border-1 {width: 115px; height: 115px; padding: 3px; position: absolute; display: flex; justify-content: center; align-items: center; background: # ffab91; animation: configure-clockwise 3s ease-in-out 0s infinite alternate;} .configure-border-2 {width: 115px; height: 115px; padding: 3px; left:-115px; display: flex; justify-content: center Align-items: center; background: rgb (63249220); transform: rotate (45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;}. Configure-core {width: 100%; height: 100%; background-color: # 37474f;} / * PULSE BUBBLES * / .pulse-container {width: 120px; display: flex; justify-content: space-between; align-items: center;}. Pulse-bubble {width: 20px; height: 20px; border-radius: 50% Background-color: # 3ff9dc;} .pulse-bubble-1 {animation: pulse .4s ease 0s infinite alternate;} .pulse-bubble-2 {animation: pulse .4s ease .2s infinite alternate;} .pulse-bubble-3 {animation: pulse .4s ease .4s infinite alternate;} / * SOLAR SYSTEM * / .solar-system {width: 250px; height: 250px; display: flex; justify-content: center; align-items: center;} .pulse {position: relative; display: flex Justify-content: center; align-items: center; border: 1px solid # ffffffa5; border-radius: 50%;}. Earth-orbit {width: 165px; height: 165px;-webkit-animation: spin 12s linear 0s infinite;}. Venus-orbit {width: 120px; height: 120px;-webkit-animation: spin 7.4s linear 0s infinite;}. Mercury-orbit {width: 90px; height: 90px;-webkit-animation: spin 3s linear 0s infinite {position: absolute; top:-5px; width: 10px; height: 10px; border-radius: 50%; background-color: # 3ff9dc;} .sun {width: 35px; height: 35px; border-radius: 50%; background-color: # ffab91;} these are all the contents of the article "how CSS3 implements loading preloaded Animation effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.