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
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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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;
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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;
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
- ________ 90 = ________ 176 = ________ 177 = ________ 178
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
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à
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
.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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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;
}
}
Để á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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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('//www.devtwins.com/images/graphics/norway1.jpeg');
}
#pic2 {
background-image: url('//www.devtwins.com/images/graphics/norway2.jpeg');
animation-delay: 8s;
}
#pic3 {
background-image: url('//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