emmm the name is just a random guess 2333 Preface This is a CSS demo for practice. If there is anything wrong with it, please correct me. I will accept it with an open mind. whee HTML Layout <div class="container"> <div class="loading"> <div class="eat"></div> <div class="load"></div> <div class="load"></div> <div class="load"></div> </div> </div> CSS Styles The main effect used is animation, which continuously controls the angle position of elements to achieve a loading demo similar to Pac-Man. body { margin: 0; padding: 0; background: #fff; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading { position: relative; width: 200px; height: 50px; display: flex; } .eat { position: relative; width: 50px; height: 50px; left: 0; color: #ff0000; animation: eat-animate 2.4s ease-in-out infinite; } @keyframes eat-animate { 100% { left: 150px; } } .eat::before { content: ''; position: absolute; width: 0; height: 0; width: 50px; height: 25px; top: 0; border-radius: 50px 50px 0 0; background: currentColor; transform: rotate(-30deg); animation: eat-top 2.4s ease-in-out infinite; } @keyframes eat-top { 20% { transform: rotate(-30deg); } 35% { transform: rotate(0deg); } 45% { transform: rotate(-30deg); } 60% { transform: rotate(0deg); } 70% { transform: rotate(-30deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .eat::after { content: ''; position: absolute; width: 0; height: 0; width: 50px; height: 25px; bottom: 0; border-radius: 0 0 50px 50px; background: currentColor; transform: rotate(30deg); animation: eat-bottom 2.4s ease-in-out infinite; } @keyframes eat-bottom { 20% { transform: rotate(30deg); } 35% { transform: rotate(0deg); } 45% { transform: rotate(30deg); } 60% { transform: rotate(0deg); } 70% { transform: rotate(30deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } .load { position: relative; width:30px; height: 30px; margin: 10px; color: #e47272; border-radius: 50%; background: currentColor; } .load:nth-child(2) { animation: load1 2.4s linear infinite; transform: scale(1); } @keyframes load1 { 35% { transform: scale(0); } 100% { transform: scale(0); } } .load:nth-child(3) { animation: load2 2.4s linear infinite; transform: scale(1); } @keyframes load2 { 30% { transform: scale(1); } 58% transform: scale(0); } 100% { transform: scale(0); } } .load:nth-child(4) { animation: load3 2.4s linear infinite; transform: scale(1); } @keyframes load3 { 60% { transform: scale(1); } 80% { transform: scale(0); } 100% { transform: scale(0); } } Preview The overall picture is as shown above. If you don't understand, you are welcome to reply directly... Currently being updated at https://github.com/ajycc20/easy-css-layout, welcome your comments! ! ! Also, it would be better to have a star (hhhh escape The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Web Design Tutorial (8): Web Page Hierarchy and Space Design
>>: Tomcat source code analysis of Web requests and processing
Don’t introduce a front-end UI framework unless i...
This article example shares the specific implemen...
Table of contents Problem Description What is Vue...
It was found in the test that when the page defini...
sed is a character stream editor under Unix, that...
What is a covering index? Creating an index that ...
I wrote a test program before, in which adding and...
1. Docker Network Mode When docker run creates a ...
need After the user fills out the form and clicks...
This article records the graphic tutorial of MySQ...
Table of contents What is Express middleware? Req...
Table of contents Preparation Install VMware Work...
Preface During development, we often encounter va...
A style sheet describes how a document should be ...
The effect is as follows: analyze 1. Here you can...