Cara Membuat Animasi Plus Minus dengan CSS

Cara Membuat Animasi Plus Minus dengan CSS - Masih dalam tutorial aniamsi dengan memanfaatkan properti - properti dari CSS, kali ini saya akan membagikan tutorial sederhana mengenai bagaimana Cara Membuat Animasi Plus Minus dengan CSS, kalian pasti sudah tau yah simbol plus minus ? Nah, nanti kita akan membuat simbol plus minus menjadi suatu animasi yang menarik, tentu kita bisa menerapkannya pada halaman web untuk menunjang tampilan menjadi lebih cantik dan menarik. Langsung saja kita mulai praktekan Cara Membuat Animasi Plus Minus dengan CSS berikut ini.

Langkah 1 : Cara Membuat Animasi Plus Minus dengan CSS

Kita mulai dengan langkah pertama, yakni kita akan membuat struktur HTML sederhana untuk membuat tampilan simbol plus minusnya, untuk itu silahkan kalian ketikan sintak HTMLnya berikut ini.

<body>
    <div id="wrapper">
      <input type="checkbox" id="vertical" />
      <label for="vertical">
      <div class="vBar"></div>
    </label>
      <div class="hBar"></div>
    </div>
</body>

Langkah 2 : Cara Membuat Animasi Plus Minus dengan CSS

Langkah selanjutnya untuk membuat animasi plus minus adalah dengan mendesain struktur HTMl yang telah kita buat diawal. Nah, dengan CSS ini kita bisa membuat tampilan berupa, layout, warna, dan tentunya animasi untuk simbol plus minus. Silahkan ketikan sintak CSS untuk membuat animasi plus minus berikut ini.

body {
  margin: 0;
  padding: 0;
  background: #2c2c54;
  height: 100%;
  width: 100%;
}

#wrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

#vertical {
  display: none;
}

#vertical:checked + label > .vBar {
  transform: rotate(90deg);
}

.vBar, .hBar{
  cursor: pointer;
  margin: 0 auto;
  background: #ffda79;  
  pointer-events: none;
}

.vBar {
  box-shadow: 5px 1px 25px rgba(0, 0, 0, 0.3);
  width: 10px;
  height: 100px;
  transition: all 0.6s cubic-bezier(.87, -.41, .19, 1.44);
}

.hBar {
  width: 100px;
  height: 10px;
  transform: translateY(-55px);
}

Selanjutnya, setelah semua sintak HTML dan CSS telah diketikan semua, silahkan simpan filenya dengan nama index.html kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Selesa

Bagaimana, simbol plus minusnya terlihat menarik bukan ? Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Animasi Plus Minus dengan CSS, semoga bermanfaat dan selamt mencoba :)

3 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat