Membuat Animasi Pacman dengan HTML dan CSS

Hallo teman-teman pada kesempatan kali ini saya akan memberikan tutorial cara Membuat Animasi Pacman dengan HTML dan CSS. sebelum kita memulainya pertama-tama yang harus teman-teman siapkan adalah text-editor dan browser.

oke jika sudah langsung saja kita buat animasi pacman nya. Dan jangan lupa buat folder baru dengan nama terserah teman-teman.

Lalu buka text-editornya lalu teman-teman ketik script htmlnya seperti dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>Membuat Pacman dengan HTML dan CSS</title>
</head>
<body>
	<container>
	  <div class="spinner spinner__4"><span></span></div>	  
	</container>
</body>
</html>

Jika sudah simpan didalam folder yang teman-teman buat sebelumnya dengan nama index.html

Kemudian lanjut kita buat stylenya atau css nya. Teman-teman bisa ketik script cssnya seperti dibawah ini :

body {
  background-color: #EBEBEB;
  font-family: 'PT Sans Narrow', sans-serif;
}
container {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 833px;
  float: left;
  padding-left: 38px;
  padding-right: 38px;
  margin-left: 500px;
  margin-top: 50px;
  background-color: #fff;
  text-align: center;
  box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
}

.spinner {
  width: 70px;
  height: 70px;
  background: #eee;
  border-radius: 50%;
  position: relative;
  margin: 40px;
  display: inline-block;
}
.spinner:after, .spinner:before {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.spinner__4 {
  background: transparent;
}
.spinner__4 span {
  width: 8px;
  height: 8px;
  background: #000;
  position: absolute;
  border-radius: 50%;
  top: 15px;
  left: 35px;
}
.spinner__4:before, .spinner__4:after {
  display: block;
  height: 0px;
  width: 0px;
  position: absolute;
  border: 35px solid #FFCC00;
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: chunk-top 1s ease infinite;
}
.spinner__4:after {
  border: 35px solid #FFCC00;
  border-right-color: transparent;
  border-top-color: transparent;
  animation: chunk-bottom 1s ease infinite;
}

@keyframes chunk-top {
  0%, 100% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-80deg);
  }
}
@keyframes chunk-bottom {
  0%, 100% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

Jika sudah style cssnya kemudian teman teman simpan dengan nama style.css. dan jangan lupa koneksikan antara htmlnya dan cssnya dengan menggunakan link href.

Langkah selanjutnya teman-teman bisa simpan dan jalankan/run dibrowsernya maka akan terlihat hasilnya seperti pada gambar dibawah ini :

Jika hasilnya sudah seperti pada gambar diatas maka artinya teman-teman sudah dapat Membuat Animasi Pacman dengan HTML dan CSS.

Oke untuk pembahasan kali ini tentang cara Membuat Animasi Pacman dengan HTML dan CSS cukup sampai disini dulu. Semoga bermanfaat sekian dan terimakasih sampai bertemu dipembahasan selanjutnya.

Membuat Animasi Pacman dengan HTML dan CSS

Kategori