Share Code Trang Trí Đón Tết

Chào mọi người, bài viết này mình đọc được bên blog .thinhem về việc chia sẽ tiện ích trang trí đón tết khá thú vị, nên mình mang về đây chia sẽ cho mọi người cùng nhau tìm hiểu và phát triển tiện ích này lên một bậc cao hơn nữa. :D.

Như hình ảnh phía trên, thì mọi người cũng nhận thấy ra điều gì rồi chứ. Đó là hai cái đèn lòng đang đung đưa 1 bên tiêu đề và menu.

Chúng ta bắt đầu nhé.

Bước 1. Mọi người thêm đoạn code CSS này vào trong giao diện.

@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 { 
  position: fixed; 
  top: -30px; 
  left: 5px; 
  z-index: 9999; 
  pointer-events: none; 
}

.deng-box2 { 
  position: fixed; 
  top: -30px; 
  right: 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: swing 3s ease-in-out infinite; 
  box-shadow: -5px 5px 50px 4px rgb(250, 108, 0); 
}

.deng-box2 .deng {
  animation: swing 5s ease-in-out infinite;
  box-shadow: -5px 5px 30px 4px rgb(252, 144, 61);
}

.deng::before { 
  position: absolute; 
  top: -7px; 
  left: 29px; 
  height: 12px; 
  width: 60px; 
  content: " "; 
  display: block; 
  z-index: 999; 
  border-radius: 5px 5px 0 0; 
  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::after { 
  position: absolute; 
  bottom: -7px; 
  left: 10px; 
  height: 12px; 
  width: 60px; 
  content: " "; 
  display: block; 
  margin-left: 20px; 
  border-radius: 0 0 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)); 
}

.xian { 
  position: absolute; 
  top: -20px; 
  left: 60px; 
  width: 2px; 
  height: 20px; 
  background: rgb(220, 143, 3); 
}

.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 0 0 59px; 
  animation: swing 4s ease-in-out infinite; 
  transform-origin: 50% -45px; 
  background: rgb(255, 165, 0); 
  border-radius: 0 0 5px 5px; 
}

.shui-c { 
  position: absolute; 
  top: 18px; 
  left: -2px; 
  width: 10px; 
  height: 35px; 
  background: rgb(255, 165, 0); 
  border-radius: 0 0 0 5px; 
}

.shui-b { 
  position: absolute; 
  top: 14px; 
  left: -2px; 
  width: 10px; 
  height: 10px; 
  background: rgb(220, 143, 3); 
  border-radius: 50%; 
}

@keyframes swing { 
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

Bước 2. Thêm đoạn code HTML bên dưới vào trước thẻ đóng </body>.

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

Như vậy đã hoàn thành, mọi người lưu lại giao diện và kiểm tra xem thế nào nhé. Chúc mọi người thành công.

Demo ở bài viết này.

Theo ThinhEm https://thinhem.id.vn/blog/share-code-trang-tri-website-ngay-tet