Sharing Teknologi – Membuat Bouncing Ball Animation Effect HTML CSS Di WordPress. HTML, yang merupakan singkatan dari HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat dan mengorganisir struktur dasar sebuah halaman web.
Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk mengelompokkan dan mendefinisikan elemen-elemen seperti teks, gambar, tautan, formulir, dan banyak lagi. Setiap tag memiliki peran spesifik dalam membentuk hierarki elemen, misalnya, tag <head> untuk informasi metadata dan <body> untuk konten utama.
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang bekerja berdampingan dengan HTML untuk mengontrol tampilan dan presentasi halaman web. CSS memungkinkan pengembang untuk menentukan properti seperti warna, jenis font, ukuran, tata letak, dan dekorasi elemen HTML. Dengan demikian, pemisahan antara struktur dan desain memungkinkan perubahan gaya tanpa mengubah struktur dasar halaman.
Kombinasi HTML dan CSS menciptakan dasar yang kuat untuk pengembangan web. HTML memberikan kerangka kerja struktural, sementara CSS memberikan fleksibilitas untuk meningkatkan estetika dan konsistensi tampilan. Melalui pemisahan ini, desainer dapat mencapai tampilan yang bersih dan terorganisir, sementara pengembang dapat memastikan fungsionalitas yang kuat.
Dengan evolusi HTML5 dan CSS3, pengembang web memiliki akses ke fitur-fitur baru yang meningkatkan pengalaman pengguna. HTML5 memperkenalkan elemen-elemen baru dan dukungan untuk multimedia, sedangkan CSS3 membawa perbaikan dalam animasi, transisi, dan responsivitas. Keduanya terus menjadi kekuatan pendorong di balik desain web modern, membentuk fondasi yang kreatif dan fungsional untuk halaman web di seluruh internet.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Bouncing Ball Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="position-relative p-3 my-1 overflow-hidden">
<div class="bouncingball-frame">
<div class="bouncingball"></div>
</div>
</div>
Style CSS
.bouncingball-frame {
width:100%;
min-height:350px;
}
.bouncingball {
width:140px;
height:140px;
border-radius:100%;
background: linear-gradient(40deg, #2096ff, #05ffa3);
animation: bounce 1s;
transform: translateY(0px);
animation-iteration-count: infinite;
position:absolute;
margin:50px;
}
@keyframes bounce {
0% {top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {top: 140px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {top: 160px; height: 120px;
-webkit-animation-timing-function: ease-in;}
65% {top: 120px; height: 140px;
-webkit-animation-timing-function: ease-out;}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {top: 0;
-webkit-animation-timing-function: ease-in;
}
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar