Hướng dẫn tạo vòng quay may mắn mừng ngày nhà giáo Việt Nam với nền chuyển động đẹp

Chỉ còn vài ngày nữa là đến ngày nhà giáo Việt Nam, bạn muốn tổ chức sự kiện nhân dịp này và muốn trang trí vòng quay may mắn của mình có background chuẩn ngày 20-11. Hãy làm theo các bước sau:

Bước 1: Tại trang chủ Vòng quay may mắn bạn vào Cài đặt -> Thư viện -> gõ từ khóa 2011 để tìm đến background là “2011-board” và ấn nút Nền để set background trên giao diện Desktop. Tiếp đó bấm phải vào ảnh “2011-mobile” và Copy Image Address.

Bước 2: Vẫn tại Form Cài đặt -> Giao diện -> Kéo xuống phần Body -> Tab có icon Mobile -> Dán ảnh nền trên giao diện mobile vừa copy ở trên vào -> Lưu lại.

Bước 3: Ấn nút Chia sẻ

– Tab Cơ bản: Bỏ check “Hiển thị giá đỡ”

– Tab Nâng cao: Kéo xuống cuối và thêm 2 thẻ <div> vào body

Tiếp đến dán đoạn css dưới đây vào phần CSS bổ sung:

@media screen and (min-width:1024px) {
  #div_bosung_1 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 300px;
    height: 414px;
    background: url("https://imagedelivery.net/z0TAgxj7IFsaIAXe2ehpvA/c907d438-b123-4f1d-b5bc-ee60cb143300/public") center center no-repeat;
    background-size: contain;
    animation: slideInOnce 1.2s ease-out forwards;
  }

  #div_bosung_2 {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 400px;
    height: 200px;
    background: url("https://imagedelivery.net/z0TAgxj7IFsaIAXe2ehpvA/82acd0c3-18cb-409a-c4c8-da01b75c9800/public") center center no-repeat;
    background-size: contain;
    animation: slideDownOnce 1.2s ease-out forwards;
  }
}

@media screen and (min-width:1440px) {
  #div_bosung_1 {
    bottom: 100px;
    left: 30px;
    width: 300px;
    height: 414px;
  }

  #div_bosung_2 {
    top: 30px;
    right: 30px;
    width: 400px;
    height: 200px;
  }
}

@media screen and (min-width:1600px) {
  #div_bosung_1 {
    width: 441px;
    height: 609px;
  }

  #div_bosung_2 {
    width: 600px;
    height: 300px;
  }
}

@keyframes slideInOnce {
  from { transform: translateX(-120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideDownOnce {
  from { transform: translateY(-120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Bước 4: Ấn nút Tiếp tục để hoàn thành.

Thật tuyệt vời, bây giờ bạn đã có 1 vòng quay với giao diện chuẩn ngày nhà giáo Việt Nam với hình ảnh một cậu bé tặng hoa thầy giáo ở bên trái và dòng chữ “Mừng ngày NHÀ GIÁO VIỆT NAM 20-11” hiển thị góc trên cùng bên phải.