Chia Sẻ Code Trang Trí Website

Đô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

[tip type="yellow"]Theo mình anh em gắn hết code vào footer web cho nhanh gọn :&(蛆音娘_OK)[/tip]
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 ! :&(蛆音娘_OK)