一、效果
使用css@keyframes，实现5个图片渐变切换的效果。如下图：
二、代码
1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title>
</head>
<body><div class="image-frame"><div class="image01">1</div><div class="image02">2</div><div class="image03">3</div><div class="image04">4</div><div class="image05">5</div></div>
</body>
</html>
2.css
.image-frame{position: relative;width: 70%;height: 300px;overflow: hidden;margin: 0 auto;
}.image01,
.image02,
.image03,
.image04,
.image05
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;}.image01{background-color: red;display: flex;align-items: center;font-size: 50px;animation: slide-animation-01 10s infinite;
}
.image02{background-color: blue;display: flex;align-items: center;font-size: 50px;animation: slide-animation-02 10s infinite;
}
.image03{background-color: yellow;display: flex;align-items: center;font-size: 50px;animation: slide-animation-03 10s infinite;
}
.image04{background-color: green;display: flex;align-items: center;font-size: 50px;animation: slide-animation-04 10s infinite;
}
.image05{background-color: purple;display: flex;align-items: center;font-size: 50px;animation: slide-animation-05 10s infinite;
}@keyframes slide-animation-01{0%{opacity: 1;}10%{opacity: 1;}20%{opacity: 1;}30%{opacity: 0;}40%{opacity: 0;}50%{opacity: 0;}60%{opacity: 0;}70%{opacity: 0;}80%{opacity: 0;}90%{opacity: 0;}100%{opacity: 0;}
}@keyframes slide-animation-02{0%{opacity: 0;}10%{opacity: 0;}20%{opacity: 0;}30%{opacity: 1;}40%{opacity: 1;}50%{opacity: 0;}60%{opacity: 0;}70%{opacity: 0;}80%{opacity: 0;}90%{opacity: 0;}100%{opacity: 0;}
}@keyframes slide-animation-03{0%{opacity: 0;}10%{opacity: 0;}20%{opacity: 0;}30%{opacity: 0;}40%{opacity: 0;}50%{opacity: 1;}60%{opacity: 1;}70%{opacity: 0;}80%{opacity: 0;}90%{opacity: 0;}100%{opacity: 0;}
}@keyframes slide-animation-04{0%{opacity: 0;}10%{opacity: 0;}20%{opacity: 0;}30%{opacity: 0;}40%{opacity: 0;}50%{opacity: 0;}60%{opacity: 0;}70%{opacity: 1;}80%{opacity: 1;}90%{opacity: 0;}100%{opacity: 0;}
}@keyframes slide-animation-05{0%{opacity: 1;}10%{opacity: 0;}20%{opacity: 0;}30%{opacity: 0;}40%{opacity: 0;}50%{opacity: 0;}60%{opacity: 0;}70%{opacity: 0;}80%{opacity: 0;}90%{opacity: 1;}100%{opacity: 1;}
}
)
