Năm 2021 sắp kết thúc. Chỉ còn vài ngày nữa sẽ bước sang năm 2022, đây là thời điểm trong năm để bắt đầu chuẩn bị trang trí tết cho website và chuẩn bị sẵn các danh sách sự kiện năm mới thu hút khách của mình.
Chia sẻ cùng các bạn bộ code hoa mai rơi ngày tết
Bước 1: Trước tiên bạn hãy vào Tùy biến -> Css bổ sung trên website và thêm vào đoạn code css dưới đây
@-webkit-keyframes flowers-fall {
0% {top:-10%}
100% {top:100%}
}
@-webkit-keyframes flowers-shake {
0%,100% {-webkit-transform:translateX(0);transform:translateX(0)}
50% {-webkit-transform:translateX(80px);transform:translateX(80px)}
}
@keyframes flowers-shake {
0%,100%{ transform:translateX(0)}
50% {transform:translateX(80px)}
}
.flower {
height:auto;
width:20px;/*chinh kich thuoc hoa*/
text-shadow: 0 0 5px #000;
position:fixed;
top:-10%;
z-index:9999;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-animation-name:flowers-fall,flowers-shake;
-webkit-animation-duration:10s,3s;
-webkit-animation-timing-function:linear,ease-in-out;
-webkit-animation-iteration-count:infinite,infinite;
-webkit-animation-play-state:running,running;
animation-name:flowers-fall,flowers-shake;
animation-duration:10s,3s;
animation-timing-function:linear,ease-in-out;
animation-iteration-count:infinite,infinite;
animation-play-state:running,running;
}
.flower:nth-of-type(0){
left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s
}
.flower:nth-of-type(1){
left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s
}
.flower:nth-of-type(2){
left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s
}
.flower:nth-of-type(3){
left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s
}
.flower:nth-of-type(4){
left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s
}
.flower:nth-of-type(5){
left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s
}
.flower:nth-of-type(6){
left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s
}
.flower:nth-of-type(7){
left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s
}
.flower:nth-of-type(8){
left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s
}
.flower:nth-of-type(9){
left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s
}
.flower:nth-of-type(10){
left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s
}
.flower:nth-of-type(11){
left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s
}
Bước 2: Bạn vào Tùy biến -> Fooder và thêm đoạn html để hiển thị hiệu ứng hoa mai rơi ở tất cả các trang. Hoặc nếu bạn sử dụng theme Flatsome và có tạo một Blocks Fooder riêng bạn hãy thêm đoạn code này vào đó
<div class="flowers" aria-hidden="true">
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-1.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-3-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-1.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-3-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
</div>
Mừng năm 2022 chúc các bạn năm mới Phát Tài – An Khang – Thịnh Vượng
Bạn hãy comment bên dưới nếu bạn cài đặt không thành công hoặc cần hướng dẫn cho website của mình nhé!
