Bismillaahirrohmaanirrohiim…
Untuk mempercantik halaman website, kita bisa membuat efek bublle menggunakan CSS.
Animasi bubble ini akan menampilkan gelembung-gelembung di halaman website yang dapat bergerak kesana-kemari dan membuat website terlihat hidup serta tidak membosankan.
Berikut kode HTML dan CSS nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Membuat efek bubble dengan CSS</title>
<style type="text/css">
.bubbles {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bubble {
position: absolute;
left: var(--bubble-left-offset);
bottom: -75%;
display: block;
width: var(--bubble-radius);
height: var(--bubble-radius);
border-radius: 50%;
animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}
.bubble::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(136, 246, 251, 0.3);
border-radius: inherit;
animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
}
.bubble:nth-child(0) {
--bubble-left-offset: 34vw;
--bubble-radius: 8vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(1) {
--bubble-left-offset: 29vw;
--bubble-radius: 9vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(2) {
--bubble-left-offset: 30vw;
--bubble-radius: 2vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(3) {
--bubble-left-offset: 6vw;
--bubble-radius: 9vw;
--bubble-float-duration: 21s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(4) {
--bubble-left-offset: 9vw;
--bubble-radius: 6vw;
--bubble-float-duration: 28s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(5) {
--bubble-left-offset: 14vw;
--bubble-radius: 4vw;
--bubble-float-duration: 19s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(6) {
--bubble-left-offset: 67vw;
--bubble-radius: 10vw;
--bubble-float-duration: 21s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(7) {
--bubble-left-offset: 32vw;
--bubble-radius: 4vw;
--bubble-float-duration: 27s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(8) {
--bubble-left-offset: 47vw;
--bubble-radius: 9vw;
--bubble-float-duration: 28s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(9) {
--bubble-left-offset: 4vw;
--bubble-radius: 3vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(10) {
--bubble-left-offset: 0vw;
--bubble-radius: 5vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(11) {
--bubble-left-offset: 20vw;
--bubble-radius: 3vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(12) {
--bubble-left-offset: 41vw;
--bubble-radius: 3vw;
--bubble-float-duration: 26s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 2s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(13) {
--bubble-left-offset: 99vw;
--bubble-radius: 3vw;
--bubble-float-duration: 26s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(14) {
--bubble-left-offset: 92vw;
--bubble-radius: 6vw;
--bubble-float-duration: 26s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(15) {
--bubble-left-offset: 49vw;
--bubble-radius: 2vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(16) {
--bubble-left-offset: 62vw;
--bubble-radius: 7vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(17) {
--bubble-left-offset: 43vw;
--bubble-radius: 10vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(18) {
--bubble-left-offset: 9vw;
--bubble-radius: 5vw;
--bubble-float-duration: 21s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(19) {
--bubble-left-offset: 16vw;
--bubble-radius: 7vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(20) {
--bubble-left-offset: 11vw;
--bubble-radius: 8vw;
--bubble-float-duration: 26s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(21) {
--bubble-left-offset: 18vw;
--bubble-radius: 6vw;
--bubble-float-duration: 27s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 2s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(22) {
--bubble-left-offset: 36vw;
--bubble-radius: 10vw;
--bubble-float-duration: 22s;
--bubble-sway-duration: 5s;
--bubble-float-delay: 1s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(23) {
--bubble-left-offset: 66vw;
--bubble-radius: 10vw;
--bubble-float-duration: 26s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 4s;
--bubble-sway-delay: 4s;
--bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(24) {
--bubble-left-offset: 47vw;
--bubble-radius: 2vw;
--bubble-float-duration: 20s;
--bubble-sway-duration: 6s;
--bubble-float-delay: 0s;
--bubble-sway-delay: 1s;
--bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(25) {
--bubble-left-offset: 20vw;
--bubble-radius: 6vw;
--bubble-float-duration: 28s;
--bubble-sway-duration: 4s;
--bubble-float-delay: 3s;
--bubble-sway-delay: 0s;
--bubble-sway-type: sway-right-to-left;
}
@keyframes float-up {
to {
transform: translateY(-175vh);
}
}
@keyframes sway-left-to-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
@keyframes sway-right-to-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
</head>
<body style="background:#4D3370 !important;">
<div class="bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</body>
</html>
Dari kode di atas, kita bisa menambah jumlah gelembung, bisa juga mengubah kecepatan dan arah bubblenya.
Cukup mudah bukan….
