Gunakan CSS untuk melaksanakan kesan Pemuatan Pac-Man

Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS tulen untuk mencapai kesan pemuatan Pac-Man. Saya harap ia akan membantu semua orang!

CSS memang sangat menawan. Mungkin mereka yang mengikuti artikel saya baru-baru ini akan tahu bahawa saya telah menerbitkan banyak artikel berkaitan CSS, dan sebahagian daripadanya telah dilihat. di Internet. Kesan seperti ini boleh dihasilkan sendiri, dan kadangkala ia berdasarkan titik pengetahuan yang baru dilihat dan digunakan untuk membuat beberapa perkara yang menyeronokkan.

Idea untuk persembahan yang saya bawa kepada anda hari ini berasal dari halaman pautan rakan blog saya Jika saya tidak boleh meminta sumber untuk avatar orang lain, maka saya akan menambah

Memuatkan padanya. . , dan ini 吃豆人 persembahan yang saya bawa hari ini~吃豆人

Realisasikan mulut besar Pac-Man

Pertama Untuk menyedari mulut besar di sebelah kiri, saya menggunakan dua perkara bentuk ini Selepas itu, saya memberikan yang di bawah

untuk bertindih Kemudian saya menggunakan kesan animasi untuk membuat bahagian atas berputar mengikut arah jam sebaliknya. dengan memutarkannya 90°, anda boleh membuka dan menutup mulut. margin-top:-50px

    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #279fcf;
    border-left: 25px solid #279fcf;
    border-bottom: 25px solid #279fcf;
    border-radius: 25px;

Animasi putaran ialah:

@keyframes rotate_pacman_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } 
}

@keyframes rotate_pacman_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); 
     }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
      }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
       } 
}

Kemudian tambahkan animasi pada css dua elemen yang baru kita hasilkan ( Hanya gunakan atribut ini:

), kerana saya menggunakan animation dengan div, jadi saya menggunakan elemen pseudo untuk memilih: div dan first-of-type masing-masing, dan memilih Satu dan yang kedua nth-child(2) berfungsi sebagai Mulut Pac-Man. div

Perlu diingatkan bahawa masa animasi kedua-dua mulut mesti disegerakkan, jika tidak, mulut akan bergerak ke atas dan ke bawah:

    animation: rotate_pacman_up 0.75s 0s infinite

Kesan semasa adalah seperti ini:

Realizing Pac-Man’s beans

Begitu juga, kami membina tiga lagi

s pada tahap yang sama dengan dua divs tadi suka div sangat~div

Semuanya boleh div! ! !

Kacang itu sangat mudah berbanding dengan mulut Pertama sekali, ia adalah bulat, dan kedua, animasinya bergerak ke kiri Jika kedua-dua syarat ini dipenuhi, ia akan menjadi baik. Kami terus menggunakan elemen pseudo untuk memilih tiga

s 3, 4 dan 5, dan menambah css ini. div

    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    transform: translate(0, -6.25px);
    top: 25px;
    left: 100px;

Adakah sesiapa yang bertanya: Mengapa anda tahu kedudukannya adalah

? -6.25px呢？

Seterusnya, tambahkan animasi bergerak ke kiri:

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } 
}

Nampaknya adalah lebih baik jika ia menjadi lebih telus untuk seketika? Ini perlu dipertimbangkan~

Akhir sekali, hanya gunakan pemilih untuk menggantung animasi pada ke-3, ke-4, dan ke-5

Pada masa yang sama, berhati-hati untuk tidak menetapkan masa mula animasi kepada yang sama, jika tidak, mereka akan Ia disegerakkan! ! ! Tetapan yang saya tetapkan di sini ialah 0.33/0.66/0.99 saat masing-masing~ Macam ni: div

    animation: pacman-balls 1s 0.33/0.66/0.99s infinite linear

Tengok kesan akhir~

Tentang itu - 6.25px

Sebenarnya.... . Saya belajar untuk masa yang lama, dan saya akan berkongsi gambar dengan anda Jika anda boleh mengiranya, tolong bantu saya mengiranya Saya akhirnya mendapatnya melalui eksperimen 6 hingga 7 hampir sama, tetapi 6.25 lebih menyenangkan mata. Tetapi apabila percubaan mencapai 7px, Pusat bulatan kecil jelas lebih tinggi sedikit, jadi emm ialah 6.25 (hampir~, dan saya ingin menulis 6.5, tetapi saya selalu fikir 6.25 bunyi lebih baik emm).

(Mempelajari perkongsian video:

tutorial video css)

Atas ialah kandungan terperinci Gunakan CSS untuk melaksanakan kesan Pemuatan Pac-Man. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!