[Blogger] Cara Membuat Efek Salju Turun Dengan CSS3


[Blogger] Cara Membuat Efek Salju Turun Dengan CSS3 - Hallo sobat blogger, berjumpa lagi dengan saya di blog anaz dzgn. Pada kesempatan ini saya akan membagikan tutorial tentang cara membuat efek salju turun menggunakan CSS.

Salju merupakan efek yang sangat diperlukan. Namun, jika sobat mengintegrasikan efek ini dengan script, pengguna akan merasa kaget dan mengganggu saat mengakses halaman. Dengan pengembangan CSS3 yang kuat, dimungkinkna unthk menggunakan efek ini tanpa menggunakan script dan akan mengurangi lag.

Untuk cara memasangnya, sobat masuk ke halaman admin blog dan pergi kebagian pengeditan HTML. Dan tempel kode berikut sebelum tag </body>


<b:if cond='data:blog.pageType not in {"static_page","item"}'>
<style type="text/css">
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}
.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");-webkit-animation-duration:20s;animation-duration:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");-webkit-animation-duration:25s;animation-duration:20s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
</style>
<div class='snow-container'>
<div class='snow foreground'></div>
<div class='snow foreground layered'></div>
<div class='snow middleground'></div>
<div class='snow middleground layered'></div>
<div class='snow background'></div>
<div class='snow background layered'></div>
</div>
</b:if>


Kemudian klik "Simpan" dan lihat hasilnya..

Dengan trik sederhana ini, anda dapat menghias blog anda dengan lebih baik dan indah untuk menyambut tahun baru.

0 Response to "[Blogger] Cara Membuat Efek Salju Turun Dengan CSS3"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close