Membuat Efek Animasi Hujan Deras Realistis di Blog dengan CSS

Tutorial membuat efek hujan CSS yang realistis, Cara menambahkan hujan deras di laman blog dengan CSS, efek hujan deras menggunakan CSS keyfrrames
Membuat Efek Animasi Hujan Deras di Blog dengan CSS

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.



About the author

unmaster
jack of all technologies, master of none.

Posting Komentar

Bijaklah dalam bermedia sosial. Jejak digital itu kejam.