PAC MAN

Cara Membuat Emote Pacman Di Css

Pada artikel ini saya akan membuat emote pac man di css pada artikel sebelumnya saya telah membuat bintang di css kamu bisa lihat di sini. Pastikan kamu sudah paham teknologi web seperti html dan css nah pada artikel ini juga penulisan nya tidak terlalu panjang kamu bisa buat file html nya dulu dengan nama index.html bisa lihat kode di bawah ini :

<!doctype html>
   <html>
  <head>
    <title>Membuat Pac man Di Css</title>
      <link rel="stylesheet" href="style.css">
  </head>   
    
  <body>  
      <center><div class="pacman"></div></center>  
      <center><div class="mata"></div></center>  
  </body>
</html>

Jangan lupa buat file css nya dengan nama style.css kode bisa di lihat di bawah ini :

body{
    background-color: darkblue;
}

.pacman{
  width: 0px;
  height: 0px;
  border: 70px solid #f7ec59;
  border-right-color: transparent;
  border-radius: 70px;
}

.mata{
    position: absolute;
    top:20px;
    left: 50%;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: black;
}

Penutup

Nah kode tersebut bisa di lihat di sini. Semoga bermanfaat :D