Home >Web Front-end >CSS Tutorial >Use pure css to achieve simple loading animation effect (code example)
This article uses code examples to introduce how to use pure CSS to achieve a simple loading animation effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
[Recommended tutorial: CSS video tutorial]
I saw that many websites currently use gif images for their loading effects, so I’m curious, how can I achieve this using just CSS? Good stuff is coming, please pick it up.
Difficulty factor
##☆☆☆☆Rendering
Ideas
CSS is used to modify HTML, so even the simplest effects depend on HTML, and the HTML layout of the effect in this example is even more important. heavy. Let’s first analyze the composition of the animation effect:HTML
<div id="container"> <div class="load-line rotate-0"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-30"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-60"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-90"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-120"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-150"> <span class="left"></span> <span class="right"></span> </div> <div id="circle-center"></div> </div>Analysis:
CSS
#container, #circle-center { background: grey; } #container { position: relative; width: 600px; height: 300px; } #circle-center { position: absolute; top: 100px; left: 250px; width: 100px; height: 100px; border-radius: 100px; } .load-line { position: absolute; top: 150px; left: 200px; width: 200px; height: 13px; } .load-line > span { display: inline-block; width: 50%; height: 100%; border-radius: 20px; background: white; } .left { float: left; } .right { float: right; } .rotate-0 { transform: rotate(0); } .rotate-0 > .left { animation: load-effect 1.2s linear 0s infinite; } .rotate-0 > .right { animation: load-effect 1.2s linear 0.6s infinite; } .rotate-30 { transform: rotate(30deg); } .rotate-30 > .left { animation: load-effect 1.2s linear 0.1s infinite; } .rotate-30 > .right { animation: load-effect 1.2s linear 0.7s infinite; } .rotate-60 { transform: rotate(60deg); } .rotate-60 > .left { animation: load-effect 1.2s linear 0.2s infinite; } .rotate-60 > .right { animation: load-effect 1.2s linear 0.8s infinite; } .rotate-90 { transform: rotate(90deg); } .rotate-90 > .left { animation: load-effect 1.2s linear 0.3s infinite; } .rotate-90 > .right { animation: load-effect 1.2s linear 0.9s infinite; } .rotate-120 { transform: rotate(120deg); } .rotate-120 > .left { animation: load-effect 1.2s linear 0.4s infinite; } .rotate-120 > .right { animation: load-effect 1.2s linear 1.0s infinite; } .rotate-150 { transform: rotate(150deg); } .rotate-150 > .left { animation: load-effect 1.2s linear 0.5s infinite; } .rotate-150 > .right { animation: load-effect 1.2s linear 1.1s infinite; } @keyframes load-effect { 0% { opacity: 0; } 100% { opacity: 1; } }Analysis:
Programming Video! !
The above is the detailed content of Use pure css to achieve simple loading animation effect (code example). For more information, please follow other related articles on the PHP Chinese website!