Efek hujan deras pada laman blog atau website dapat memberikan kesan yang menarik dan membuat halaman menjadi lebih hidup. Salah satu cara untuk membuat efek hujan deras tersebut adalah dengan menggunakan CSS.
Dalam artikel ini, akan dijelaskan langkah-langkah untuk membuat animasi hujan deras menggunakan CSS seperti pada demo dibawah.
Langkah 1 : Langkah pertama yang perlu dilakukan adalah membuat HTML dan CSS dasar. Buatlah div dengan class "cuaca ujan" untuk menampung animasi hujan deras. Kurang lebih seperti dibawah.
<div class="cuaca ujan"></div>
Letakkan kode diatas dibawah tag <body> atau bisa juga diatas tag penutup body yaitu </body> terserah kamu.
Langkah 2 : Kemudian, tambahkan style CSS dibawah ini.
.cuaca {
position: fixed;
width: 100%;
height: 100%!important;
left: 0;
top: 0;
overflow: hidden;
z-index: -1;
}
.cuaca:before, .cuaca:after {
content: "";
position: absolute;
left: -100%;
top: -100%;
right: -100%;
bottom: -100%;
pointer-events: none;
background: transparent repeat;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: cuaca;
animation-name: cuaca;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.cuaca:after {
-webkit-animation-name: cuaca2;
animation-name: cuaca2;
}
.cuaca.ujan:before, .cuaca.ujan:after {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2nsC6lLKvYwtPQfYbgXOWdAK86CLeqnTTMHfCh-319CbSAha8_aJsL6LwTyD5310MNvRmwm1Ii6avh6XPz5Jpe_XlMLrITfMVp5mjA2QG9VW1Rap7FdfqLRQ6MwkKNbOg3ecZrKIU7vHCOWcSlMrH0azYCnv1k_eR3IY8VeAq5mv6EPfe2GAm7oTnw/s1600/hexartch-ujan.png) left top;
opacity: 0.6;
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.cuaca.ujan:after {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
@-webkit-keyframes cuaca {
from { background-position: 0 0; }
to { background-position: 0 1024px; }
}
@keyframes cuaca {
from { background-position: 0 0; }
to { background-position: 0 1024px; }
}
@-webkit-keyframes cuaca2 {
from { background-position: 64px 64px; }
to { background-position: 64px 1088px; }
}
@keyframes cuaca2 {
from { background-position: 64px 64px; }
to { background-position: 64px 1088px; }
}
Kamu bisa meletakan kode CSS nya diatas ]]></b:skin>.
dan yaa, sudah jadi. Selamat mencoba.