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

jack of all technologies, master of none.

Posting Komentar

Bijaklah dalam bermedia sosial. Jejak digital itu kejam.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.