Membuat Logo dan Animasi robot Android menggunakan CSS

Membuat Logo dan Animasi robot Android menggunakan CSS

  01 January    Andika

---

Membuat Logo dan Animasi robot Android menggunakan CSS akan menjadi postingan pembuka saya di tahun yang baru ini. Pada dasarnya, ini hanya untuk sekedar hiburan semata sekaligus membuktikan kalau dengan CSS kita dapat membuat tampilan-tampilan tertentu tanpa harus menggunakan gambar seperti biasanya.

Selain tampilannya yang benar-benar mirip dengan robot android (Robot Ijo), efek animasi yang ditambahkan juga mampu mengerakan kedua tangan dan kepala robotnya. Jadi kamu dapat melihat animasinya dengan meletakan kursor di atas tangan atau pun kepala robotnya.

Berikut pratinjaunya,



Ini kode CSSnya

div {
  margin:o;
  padding:0;
}

div div {
  background:#A4CA39;
  position:relative;
}

.android {
  height:404px;
  width:334px;
  margin:100px auto;
}

.kepala {
  width:220px;
  height:100px;
  top:32px;
  border-radius:110px 110px 0 0;
  transition:all 0.3s ease-in;
}

.mata-kiri,
.mata-kanan {
  background:#fff;
  width:20px;
  height:20px;
  position:absolute;
  top:42px;
  border-radius:10px;
}

.mata-kiri {
  left:50px;
}

.mata-kanan {
  right:50px;
}

.antena-kiri,
.antena-kanan {
  width:6px;
  height:50px;
  position:absolute;
  top:-34px;
  border-radius:3px;
}

.antena-kiri {
  left:50px;
  transform:rotate(-30deg);
}

.antena-kanan {
  right:50px;
  transform:rotate(30deg);
}

.badan {
  width:220px;
  height:184px;
  top:40px;
  border-radius:0 0 25px 25px;
}

.tangan-kiri,
.tangan-kanan,
.kaki-kiri,
.kaki-kanan {
  width:50px;
  position:absolute;
  transition:all 0.3s ease-in;
}

.tangan-kiri,
.tangan-kanan {
  height:150px;
  border-radius:25px;
}

.kaki-kiri,
.kaki-kanan {
  height:80px;
  top:182px;
  border-radius:0 0 25px 25px;
}

.tangan-kiri {
  left:-58px;
}

.tangan-kanan {
  right:-58px;
}

.kaki-kiri {
  left:45px;
}

.kaki-kanan {
  right:45px;
}

.kepala:hover {
  transform:rotate(-5deg) translate(-4px,-8px);
}

.tangan-kiri:hover {
  transform:rotate(15deg) translate(-14px,0);
}

.tangan-kanan:hover {
  transform:rotate(-30deg) translate(30px,0);
}

Dan ini kode HTMLnya

<div class="android">
    <div class="kepala">
        <div class="antena-kiri"></div>
        <div class="antena-kanan"></div>
        <div class="mata-kiri"></div>
        <div class="mata-kanan"></div>
    </div>
    <div class="badan">
        <div class="tangan-kiri"></div>
        <div class="tangan-kanan"></div>
        <div class="kaki-kiri"></div>
        <div class="kaki-kanan"></div>
    </div>
</div>

Silahkan di coba, barangkali kamu bisa membuat robot kuning abu-abu.