Tạo hiệu ứng mưa rơi trên blogspot

Hôm trước mình có chia sẻ cho các bạn hiệu ứng lá vàng rơi trên blogspot rồi. Mà hôm nay Hà Nội nóng quá nên muốn thay đổi từ lá vàng sang mưa đi.
Thủ thuật hôm nay của chúng ta là làm thế nào để tạo hiệu ứng mưa rơi trên blogspot nha. Giờ cùng tìm hiểu các bước bên dưới nào!

Cách thực hiện:
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán đoạn code sau đây trước thẻ </head>

<style class='cp-pen-styles'>.muaroi-container { position: fixed; height: 1500px; width: 100%; max-width: 100%; top: 0; overflow: hidden; z-index: 2; pointer-events: none; } .muaroi { 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: muaroi linear infinite; animation: muaroi linear infinite; } .muaroi.foreground { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmdqaYdXSvmAQFRul-iSNI_0KQdc2ViD3cwY6cv50_1uPGVoWKN__x4yZXslwitYAzDUcwyb48vdwR2r1wdQ8btoLD6MDSjs1QDMcMYpodVRatZWg-TPJyXMaD-PGHGfXzEt1rXWEo4Y/s1600/snow-small-dtc.png"); -webkit-animation-duration: 2s; animation-duration: 2s; } .muaroi.foreground.layered { -webkit-animation-delay: 1s; animation-delay: 1s; } .muaroi.middleground { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmdqaYdXSvmAQFRul-iSNI_0KQdc2ViD3cwY6cv50_1uPGVoWKN__x4yZXslwitYAzDUcwyb48vdwR2r1wdQ8btoLD6MDSjs1QDMcMYpodVRatZWg-TPJyXMaD-PGHGfXzEt1rXWEo4Y/s1600/snow-small-dtc.png); -webkit-animation-duration: 4s; animation-duration: 4s; } .muaroi.middleground.layered { -webkit-animation-delay: 2s; animation-delay: 2s; } .muaroi.background { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmdqaYdXSvmAQFRul-iSNI_0KQdc2ViD3cwY6cv50_1uPGVoWKN__x4yZXslwitYAzDUcwyb48vdwR2r1wdQ8btoLD6MDSjs1QDMcMYpodVRatZWg-TPJyXMaD-PGHGfXzEt1rXWEo4Y/s1600/snow-small-dtc.png); -webkit-animation-duration: 6s; animation-duration: 6s; } .muaroi.background.layered { -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes muaroi { 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 muaroi { 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>

Bước 3: Tiếp tục dán đoạn code dưới trước thẻ </body>

<div class='muaroi-container'><div class='muaroi foreground'></div><div class='muaroi foreground layered'></div><div class='muaroi middleground'></div><div class='muaroi middleground layered'></div><div class='muaroi background'></div><div class='muaroi background layered'></div></div>

Bước 4: Lưu template lại.
Lưu ý: Do là mưa nên khá khó nhìn trên nền trắng, vì vậy mình khuyên nếu làm cái này tốt nhất để nền blog là nền màu tối nhé.

Chúc các bạn thành công :)