Đôi lời
Hôm nay rảnh rồi ngồi mần code, thấy đoạn code khá là ảo diệu
Tạo 2 cái lồng đèn bay bay trang trí web ngày tết
Demo
Hướng dẫn
Theo mình anh em gắn hết code vào footer web cho nhanh gọn
CSS
@media (max-width: 767.98px) {
.deng-box1 { transform: scale(0.5) rotate(1deg); }
.deng-box2 { transform: scale(0.5) rotate(1deg); }
.deng { top: -65px; }
}
.deng-box1 { transform: scale(0.5) rotate(1deg); }
.deng-box2 { transform: scale(0.5) rotate(1deg); }
.deng { top: -65px; }
.deng-box1 { position: fixed; top: -30px; left: 5px; z-index: 9999; pointer-events: none; }
.deng { position: relative; width: 120px; height: 90px; margin: 50px; background: rgba(216, 0, 15, 0.8); border-radius: 50%; transform-origin: 50% -100px; animation: 3s ease-in-out 0s infinite normal none running swing; box-shadow: rgb(250, 108, 0) -5px 5px 50px 4px; }
.deng::before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0px 0px; border: 1px solid rgb(220, 143, 3); background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); }
.xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: rgb(220, 143, 3); }
.deng-box1 { pointer-events: none; }
.deng-a { width: 100px; height: 90px; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 10px; border-radius: 50%; border: 2px solid rgb(220, 143, 3); }
.deng-b { width: 45px; height: 90px; background: rgba(216, 0, 15, 0.1); margin: -2px 8px 8px 26px; border-radius: 50%; border: 2px solid rgb(220, 143, 3); }
.deng-t { font-family: Arial, "Lucida Grande", Tahoma, sans-serif; font-size: 1.3rem; color: rgb(255, 165, 0); font-weight: bold; line-height: 42px; text-align: left; width: 25px; margin: 5px auto; }
.shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0px 0px 59px; animation: 4s ease-in-out 0s infinite normal none running swing; transform-origin: 50% -45px; background: rgb(255, 165, 0); border-radius: 0px 0px 5px 5px; }
.shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: rgb(255, 165, 0); border-radius: 0px 0px 0px 5px; }
.shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: rgb(220, 143, 3); border-radius: 50%; }
.deng::after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0px 0px 5px 5px; border: 1px solid rgb(220, 143, 3); background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); }
.deng-box2 { position: fixed; top: -30px; right: 5px; z-index: 9999; pointer-events: none; }
.deng-box2 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: rgba(216, 0, 15, 0.8); border-radius: 50%; transform-origin: 50% -100px; animation: 5s ease-in-out 0s infinite normal none running swing; box-shadow: rgb(252, 144, 61) -5px 5px 30px 4px; }
.deng-box2 { pointer-events: none; }
@-webkit-keyframes swing {
0% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(-10deg); }
}
HTML Hiển Thị
<div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t"></div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
<div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t"></div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
Chúc các bạn thành công !
Sửa lần cuối: 03-12-2023