Implementation of CSS loading effect Pac-Man

Implementation of CSS loading effect Pac-Man
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

Recommend

CSS to achieve single-select folding menu function

Don’t introduce a front-end UI framework unless i...

WeChat applet custom bottom navigation bar component

This article example shares the specific implemen...

Vue uses dynamic components to achieve TAB switching effect

Table of contents Problem Description What is Vue...

Use the sed command to modify the kv configuration file in Linux

sed is a character stream editor under Unix, that...

Examples of using MySQL covering indexes

What is a covering index? Creating an index that ...

Solution to the problem that input in form cannot be submitted when disabled

I wrote a test program before, in which adding and...

Docker network mode and configuration method

1. Docker Network Mode When docker run creates a ...

MySQL 8.0.17 installation and configuration graphic tutorial

This article records the graphic tutorial of MySQ...

Detailed explanation of how Node.js middleware works

Table of contents What is Express middleware? Req...

An example of how JavaScript can prevent duplicate network requests

Preface During development, we often encounter va...

W3C Tutorial (7): W3C XSL Activities

A style sheet describes how a document should be ...

How to use CSS to achieve data hotspot effect

The effect is as follows: analyze 1. Here you can...