[Blogger] Cara Membuat Efek Salju Turun Dengan CSS3 - Hallo sobat blogger, berjumpa lagi dengan saya di blog ANAZ.MY.ID. Pada kesempatan kali 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, dimungkinkan untuk menggunakan efek ini tanpa menggunakan script dan akan mengurangi lag.
Untuk cara memasangnya, sobat masuk ke halaman admin blog dan pergi kebagian "Edit 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 menghiasi blog anda dengan lebih baik dan indah untuk menyambut tahun baru. Demikian artikel dari saya tentang Cara Membuat Efek Salju Turun Dengan CSS3. Semoga artikel yang saya bagikan bermanfaat bagi sobat. Terima kasih dan selamat mencoba
Rate This Article
Thanks for reading: [Blogger] Cara Membuat Efek Salju Turun di Blog Dengan CSS3, Sorry, my English is bad:)