Đây là một số hiệu ứng mình lấy từ Flatsome Template, có thể áp dụng được cả cho các trang blogspot bình thường.
Điều đặc biệt của thủ thuật này là chỉ dùng CSS, không làm giảm tốc độ tải trang của các bạn.
Demo một vài hiệu ứng
1. Hiệu ứng tuyết rơi
2. Hiệu ứng mưa rơi
3. Hiệu ứng bong bóng
4. Hiệu ứng pháo chúc mừng
Cách thực hiện
Bước 1: Vào chủ đề --> Tùy chỉnh --> chỉnh sửa HTML tìm ]]></b:skin> thêm đoạn code này bên trên nó.
.fill{position:absolute;top:0;left:0;height:100%;right:0;bottom:0;z-index:1}
.no-click{pointer-events:none}
@keyframes rain{0%{background-position:0 0}100%{background-position:500px 1000px}}
.effect-rain{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbnsM2uqK33Sqoe_ss3_icki5sBRJHy49fits48EBafP1W-b0e8dx52JERqrhhpSSa6TUX1X9KI1A-DsQYyNNj3iLVKqc1ff9qGabVMcqhRORAFbkrSB81tmNL-8oQI0hp_MXmW2mP_8u/s93/rain.png");animation:rain 2s linear infinite}
@keyframes sparkle{0%{background-position:0 0,0px 0,0px 0}100%{background-position:-500px -1000px,-400px -400px,300px 300px}}
.effect-sparkle{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg58XWERrV6uY5OYLQHE5dz3m-VP5cP2A6MResdDzptbibgP17itaKKA4d54PjB1GCzJOgIeySg2QXvTV5FuCs4TDRx6PYr_ie9QW-v3btMYRp3rIPY9nzPn4mhPnmX9-NWveN-Eu33hO_/s500/sparkle1.png"),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG_xljWk6P3H1G1ebA1PCmW0huhqjdMEZI3Vg8Pgg_Nh4jNphmTnw7VI283CzFqPcofuPA-1YyhHa0ikPuZ4n5OxeQMSgaX6hGOMABkjfLMGg4wspxvgbbVO4mwDosAGpAy0T8eabMikSE/s400/sparkle2.png");animation:sparkle 60s linear infinite}
@keyframes glass{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px}}
.effect-sliding-glass{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hgnOLxZLVdozxSyg92dSXrzHawu_HstRlGcbVu2plb8eyTV-I9WCsSExDuTaEVWQbrszmeRtlO_mF1pHZQuxC9RY2e6Dy8EXvHm4EzvokvKLuEEHWtR6LB0UbLIYZe1d2m03aV73Ts44/s500/glass1.png"),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMj8T3NTFlln6VNleJA7AT6UHFUAagrBnCmifJqsLYlDN2HB8OYW4xjyT1q7o9Yisco4ae2V-MUdVJpF0Ktj7GJ-x8qvwh03vwTKIgNyaoVdeC_06JSzSTUNnTt__b5Mtd8BfY-efMdQaj/s500/glass2.png");animation:glass 30s linear infinite}
@keyframes confetti{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
.effect-confetti{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfFhbLswHrMtDKavcZNAK7EEpE5OYNPtcgnfCO-ev4cXUE2rbW3gG51aWALwBPfv4GhPsnqbTcBFA356t9JDrWQk7aLSbIuYhqWt3uxmGPhhgs48U7gDPJu6mjEU9MI9dVVNAcLRZWWMJ0/s500/confetti1.png"),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxYZ8lFHVgroWm3aK6ZwLx9SQdFAKV_PrJeCxf-xDrSx6WwwdXziCbuzdPaPrdaelsqADxSR5fFpsblEKJ9WEUYbnoqUY0NPCHZO2R651A5Z_1MOxt_RKRB0_PH04OWRiaj1s7BEL84AL/s400/confetti2.png");animation:confetti 10s linear infinite}
@keyframes snow{0%{background-position:0 0,0px 0,0px 0}100%{background-position:500px 1000px,400px 400px,300px 300px}}
.effect-snow{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcQYM1LsR-7nHdHZFFn-vlBg3k-UhGOOSKj-xAHJnMtk4h70ixwND6_YGrHPcS7GXHtc8CwEc76Y2TgEq2V6sQY-GrFrKpLADFnzDpBfYpArdTFjP4Ls5ID-3WFRLi4ggFJVp_IvjuIBc/s500/snow1.png"),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DqiS4iLhnhn9QR8pAfwh16MNtpjGci0e7YkSR3LsH9oqeCgrQi9ohQX29-lGNUv_65h0UYApKIcRat9FI7HetNZJRqrb-KOqmJ8Hnxlby-9ePJJXZyLbH_fg8PiVq3y3Y5vibl5vURtc/s400/snow2.png");animation:snow 20s linear infinite}
Bước 2: Tìm đến thẻ <body và chèn đoạn code dưới đây
<div class='fill effect-snow no-click'></div>Thay đổi effect-snow thành một hiệu ứng khác:
- effect-snow hiệu ứng tuyết rơi
- effect-rain hiệu ứng mưa
- effect-sliding-glass hiệu ứng ánh sáng
- effect-confetti hiệu ứng pháo sinh nhật
- sparkle hiệu ứng bong bóng (theo mình là hiệu ứng đẹp nhất)
Bước 3: Lưu lại và tận hưởng thành quả.
Tags:
Thủ thuật