search

Làm mờ CSS hình ảnh

1 năms trước
Trả lời: 0
Lượt xem: 15

Bạn sẽ có thể quyết định số lượng hình ảnh bạn muốn, thời gian bạn muốn mỗi hình ảnh hiển thị và thời gian bạn muốn quá trình chuyển đổi giữa các hình ảnh kéo dài

Show

Chúng tôi sẽ bắt đầu bằng cách hiển thị mã cho bản trình diễn ở trên, sau đó ở phần cuối, chúng tôi sẽ thảo luận về cách bạn có thể tùy chỉnh mã đó

Ghi chú. Chúng tôi sẽ thiết lập thành phần này dưới dạng một thành phần React nhưng phần đánh dấu và CSS có thể dễ dàng được trích xuất và áp dụng ở mọi nơi

Bắt đầu nào

đánh dấu

Để xây dựng bản demo này, chúng tôi sẽ sử dụng 3 hình ảnh

Đây là cách đánh dấu thành phần của bạn sẽ trông như thế nào

export const Demo = () => {
  return (
      <div className='container'>
        <div className='pic' id='pic3' />
        <div className='pic' id='pic2' />
        <div className='pic' id='pic1' />
      </div>
  );
};


Lưu ý rằng các hình ảnh phải được xếp chồng lên nhau theo thứ tự ngược lại với cách bạn muốn chúng xuất hiện. Ví dụ: hình ảnh bạn muốn xuất hiện đầu tiên phải ở dưới cùng
CSS
Và đây là vanilla CSS nên được áp dụng cho phần đánh dấu ở trên để tạo cho nó hiệu ứng mờ dần phù hợp
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


Tạo + Tùy chỉnh của riêng bạn
Vì vậy, bạn đã thấy mã cho bản demo ở trên - thật tuyệt
Nhưng rất có thể bạn muốn lấy những gì bạn thấy ở đây và sử dụng nó để tạo các hình ảnh mờ dần tùy chỉnh của riêng bạn
Nếu đây là trường hợp, thì bạn sẽ cần hiểu thêm một chút về cách tạo bản demo ở trên
Để tạo lại hoạt hình hình ảnh mờ dần của riêng bạn, có một vài bước chính (và các công thức đơn giản) mà bạn cần phải làm theo
1. Hình ảnh và thời gian
Đầu tiên, chọn số lượng hình ảnh bạn sẽ sử dụng. Con số này là 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


6 trong các công thức bên dưới
Sau đó, đối với ảnh 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


6, bạn phải xác định
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


8 = thời gian hiển thị cho một hình ảnh
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


9 = thời lượng cho mờ dần
Vì vậy
animation-duration =  t  =  (a + b) * n
animation-delay =  t/n  hoặc  a + b
Nếu bạn không chắc chắn chính xác cách sử dụng bất kỳ thứ gì trong số này, đừng lo lắng. Chúng ta sẽ đi qua một ví dụ đầy đủ ở phần cuối
2. Tính toán khung hình chính
Bất kể bạn đang sử dụng bao nhiêu hình ảnh, bạn sẽ luôn có 5 khung hình chính trong hoạt ảnh 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


0 của mình
Nhưng giá trị phần trăm của mỗi khung hình chính phải thay đổi tùy thuộc vào số lượng hình ảnh bạn đang sử dụng (
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


6), thời gian bạn muốn mỗi hình ảnh hiển thị trong bao lâu (
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


8) và thời gian bạn muốn mỗi chuyển đổi mờ dần kéo dài (
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


9)
May mắn thay, các công thức cho mỗi khung hình chính không thay đổi. Và vì khung hình chính đầu tiên luôn là 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


4 và khung hình thứ năm luôn là 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


5, nên bạn chỉ cần tính giá trị cho ba khung hình chính ở giữa
  1. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    4
  2. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    7
  3. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    8 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    9
  4. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 20s infinite;
      animation: fade 20s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('1.png');
    }
    #pic2 {
      background-image: url('2.png');
      animation-delay: 5s;
    }
    #pic3 {
      background-image: url('3.png');
      animation-delay: 10s;
    }
    #pic4 {
      background-image: url('4.png');
      animation-delay: 15s;
    }
    

    0
  5. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    5
3. Để tất cả chúng cùng nhau
Bước cuối cùng này sẽ chỉ thực hiện 2 bước trước đó và xem qua một ví dụ đầy đủ với chúng
Vì vậy, giả sử chúng tôi có 4 hình ảnh và chúng tôi muốn mỗi hình ảnh hiển thị trong 3 giây. Và cũng giả sử rằng chúng ta muốn quá trình chuyển đổi cho mỗi lần mờ dần kéo dài 2 giây
Nói cách khác
  • .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    6 = 4
  • .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    8 = 3
  • .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    9 = 2
Với những giá trị này, chúng ta có thể nhanh chóng tìm ra tổng thời lượng hoạt ảnh 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 20s infinite;
  animation: fade 20s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('1.png');
}
#pic2 {
  background-image: url('2.png');
  animation-delay: 5s;
}
#pic3 {
  background-image: url('3.png');
  animation-delay: 10s;
}
#pic4 {
  background-image: url('4.png');
  animation-delay: 15s;
}


5 và độ trễ hoạt ảnh của chúng ta sẽ là bao nhiêu
  • t  =  (a + b) * n  =  (3 + 2) * 4 = 20 seconds
  • animation-delay =  a + b  =  3 + 2 = 5 seconds
Với tất cả những điều này đã tìm ra, bây giờ chúng ta biết một số điều về CSS của chúng ta sẽ trông như thế nào
Vì chúng tôi biết rằng chúng tôi sẽ có 4 hình ảnh và thời lượng hoạt ảnh của chúng tôi là 20 giây và độ trễ hoạt ảnh của chúng tôi là 5 giây, giờ đây chúng tôi có thể thực hiện việc này
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 20s infinite;
  animation: fade 20s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('1.png');
}
#pic2 {
  background-image: url('2.png');
  animation-delay: 5s;
}
#pic3 {
  background-image: url('3.png');
  animation-delay: 10s;
}
#pic4 {
  background-image: url('4.png');
  animation-delay: 15s;
}


Tất cả những gì còn lại là tạo hoạt hình 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


0 thực tế mà chúng tôi có thể thực hiện bằng cách tính toán ba khung hình chính ở giữa mà chúng tôi sẽ cần bằng cách sử dụng các công thức mà chúng tôi đã đề cập
  1. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    4
  2. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    7 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 20s infinite;
      animation: fade 20s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('1.png');
    }
    #pic2 {
      background-image: url('2.png');
      animation-delay: 5s;
    }
    #pic3 {
      background-image: url('3.png');
      animation-delay: 10s;
    }
    #pic4 {
      background-image: url('4.png');
      animation-delay: 15s;
    }
    

    9 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    70
  3. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    8 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    9 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    73 = 
    .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    74
  4. ________ 90 = ________ 176 = ________ 177 = ________ 178
  5. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    5
Vì vậy, không có công thức, chúng ta có thể thấy năm giá trị khung chính của mình là
  1. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    4
  2. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    70
  3. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    74
  4. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    78
  5. .container {
      position: relative;
      display: block;
      width: 100%;
      max-width: 400px;
      height: 280px;
      margin: 0 auto;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation: fade 24s infinite;
      animation: fade 24s infinite;
    }
    #pic1 {
      animation-delay: 0s;
      background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
    }
    #pic2 {
      background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
      animation-delay: 8s;
    }
    #pic3 {
      background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
      animation-delay: 16s;
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fade {
      0% {
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      34% {
        opacity: 0;
      }
      88% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    

    5
Để áp dụng điều này trực tiếp cho hoạt hình 
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


0 trong CSS của chúng ta sẽ như thế này
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


7
Thật tuyệt vời. Vậy là xong, giờ chúng ta đã tạo một thành phần hình ảnh mờ dần hoàn toàn mới dựa trên các tham số mới
Toàn bộ đánh dấu và CSS bây giờ sẽ trông như thế này
đánh dấu
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


4
CSS
.container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: fade 24s infinite;
  animation: fade 24s infinite;
}
#pic1 {
  animation-delay: 0s;
  background-image: url('https://www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
  background-image: url('https://www.devtwins.com/images/graphics/norway2.jpeg');
  animation-delay: 8s;
}
#pic3 {
  background-image: url('https://www.devtwins.com/images/graphics/norway3.jpeg');
  animation-delay: 16s;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


5
Ghi chú kết thúc
Chúc mừng vì đã tiến xa đến mức này. Tôi hy vọng bài viết này hữu ích cho bạn
Một điều nữa cần lưu ý là tìm cách tối ưu hóa việc tải hình ảnh trong thành phần của bạn, lý tưởng nhất là theo cách đảm bảo rằng hình ảnh đầu tiên trong ngăn xếp luôn tải trước các hình ảnh khác
Nhưng ngoài điều đó ra, tôi hy vọng bạn vui vẻ chơi với những gì bạn đã học được ở đây và cuối cùng sẽ tạo ra một số nội dung tuyệt vời với nó trên web
Nếu bạn thích bài đăng này, hãy cân nhắc theo dõi tôi trên twitter và/hoặc đăng ký blog bằng cách sử dụng biểu mẫu bên dưới
 

			
Làm mờ dần trong CSS là gì?

			
Phương pháp 1. Sử dụng thuộc tính hoạt hình CSS. Hoạt ảnh CSS được xác định bằng 2 khung hình chính. Một cái có độ mờ được đặt thành 0, cái còn lại có độ mờ được đặt thành 1. Khi loại hoạt ảnh được đặt thành dễ dàng, hoạt ảnh sẽ mờ dần trong trang. Thuộc tính này được áp dụng cho thẻ body

		
			
CSS mờ chéo là gì?

			
cross-fade() Hàm CSS cross-fade()  có thể được sử dụng để trộn hai hoặc nhiều hình ảnh với độ trong suốt xác định . Nó có thể được sử dụng cho nhiều thao tác hình ảnh đơn giản, chẳng hạn như tô màu hình ảnh bằng một màu đơn sắc hoặc làm nổi bật một khu vực cụ thể của trang bằng cách kết hợp hình ảnh với dải màu xuyên tâm. 

		
			
Làm cách nào để đặt hình ảnh động trong CSS?

			
CSS cho phép hoạt ảnh của các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash.  . 
 
@keyframes
 
tên hoạt hình
 
Thời lượng hoạt ảnh
 
chậm trễ hoạt hình
 
hoạt hình-lặp lại-đếm
 
hướng hoạt hình
 
hoạt hình-thời gian-chức năng
 
chế độ hoạt hình-điền
 

		
			
Làm cách nào để tạo hiệu ứng động cho hình ảnh trong HTML?

			
Chúng ta cần  sử dụng thẻ   để thêm hình ảnh động trong HTML. Thuộc tính src thêm URL của hình ảnh (đích tệp). Ngoài ra, chúng ta có thể đặt chiều cao và chiều rộng của hình ảnh bằng thuộc tính height và width.
programming css

Bài Viết Liên Quan

Tôi có nên sử dụng JavaScript dấu phẩy ở cuối không?
Tôi có nên sử dụng JavaScript dấu phẩy ở cuối không?

Json có phải là định dạng mongodb không?
Json có phải là định dạng mongodb không?

Cookie và phiên trong php bằng tiếng Hin-ddi
Cookie và phiên trong php bằng tiếng Hin-ddi

Việc sử dụng mysqli_connect là gì?
Việc sử dụng mysqli_connect là gì?

March 23, 2023 what day
March 23, 2023 what day

Tamil Panchangam 2022 với 2023
Tamil Panchangam 2022 với 2023

Nhận ID danh mục bằng sên
Nhận ID danh mục bằng sên

Tạo nút tăng giảm trong excel
Tạo nút tăng giảm trong excel

JavaScript có thể truy cập cơ sở dữ liệu MySQL không?
JavaScript có thể truy cập cơ sở dữ liệu MySQL không?

Đêm giao thừa New York 2023
Đêm giao thừa New York 2023

MỚI CẬP NHẬP

Bảng kê hóa đơn mua vào trên misa năm 2024
10 phúts trước . bởi Four-dayVerification
Năm nay môn thứ tư thi cấp 3 là hóa năm 2024
39 phúts trước . bởi MeekCivilisation
Ẩn dụ là gì hoán dụ là gì năm 2024
46 phúts trước . bởi UntimelyTreadmill
Download bảng tài khoản kế toán theo thông tư 200 năm 2024
1 giờs trước . bởi ImplausiblePragmatism
Cant wait to see you là gì năm 2024
1 giờs trước . bởi ConvertedShoplifting
Lỗi không thể bỏ qua quảng cáo trên youtube năm 2024
1 giờs trước . bởi HeavenlyLeopard
Toán lớp 4 bài luyện tập trang 87 năm 2024
1 giờs trước . bởi FelineDigress
Xét nghiệm máu ure là gì năm 2024
2 giờs trước . bởi DisinterestedPlaza
Bài giảng toán lop 10 bai 1 chương 4 năm 2024
2 giờs trước . bởi NobleVicinity
Caách giải bài tập nhận biết hóa 10 năm 2024
2 giờs trước . bởi ShakenRetirement

Xem Nhiều

Cách mạng công nghiệp 4.0 cơ hội nào cho startup năm 2024
6 ngàys trước . bởi SinfulBoldness
Các dạng toán chương 1 kinh tế vĩ mô năm 2024
4 ngàys trước . bởi HeathenPolling
Cách bố trí hàng hóa trên các kệ hàng năm 2024
1 ngàys trước . bởi RidiculousBookmark
Bài tập tự luận unit 12 tiếng anh 8 năm 2024
3 ngàys trước . bởi Ten-yearCross-examination
724 22 lê văn lương.phước kiểng nhà bè năm 2024
2 ngàys trước . bởi AcousticEnthusiasm
Top phim xuyen khong hay nhat trung quoc năm 2024
1 tuầns trước . bởi BlissfulAbstinence
Backtory nghĩa là gì câu chuyện hậu trường năm 2024
4 ngàys trước . bởi RipplingProcessor
Hiệu ứng nhiệt của phản ứng hóa học năm 2024
5 ngàys trước . bởi PlaintiveRepayment
Số điện thoại của lazada là gì năm 2024
20 giờs trước . bởi ForensicElectricity
Máy bọ điện tử báo lỗi e-e0 năm 2024
1 tuầns trước . bởi GargantuanImmunity

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.