1、效果演示
2、完整代码
（1）直接通过 CSS 设置，渲染性能较好
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: black;
100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.frame {
500px;
min- 500px;
height: 300px;
min-height: 300px;
border- 8px;
border-style: solid;
border-color: goldenrod darkgoldenrod;
background-color: black;
position: relative;
overflow: hidden;
}
.photo {
opacity: 0;
position: absolute;
animation: fade 12s infinite;
}
@keyframes fade {
25% { opacity: 1; }
50% { opacity: 0; }
}
.photo:nth-child(1) {
animation-delay: 0s;
}
.photo:nth-child(2) {
animation-delay: 4s;
}
.photo:nth-child(3) {
animation-delay: 8s;
}
</style>
</head>
<body>
<div class="frame">
<img class='photo' src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" alt="" />
<img class='photo' src="https://cdn.pixabay.com/photo/2016/12/09/06/22/the-beach-1893714__340.jpg" alt="" />
<img class='photo' src="https://cdn.pixabay.com/photo/2017/12/05/01/12/sunset-2998295__340.jpg" alt="" />
</div>
</body>
</html>
（2）通过 JavaScript 控制 CSS 设置，代码方便拓展
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: black;
100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.frame {
500px;
min- 500px;
height: 300px;
min-height: 300px;
border- 8px;
border-style: solid;
border-color: goldenrod darkgoldenrod;
background-color: black;
position: relative;
overflow: hidden;
}
.photo {
opacity: 0;
position: absolute;
}
@keyframes fade {
25% { opacity: 1; }
50% { opacity: 0; }
}
</style>
<script>
function setAnimation(){
let frame = document.getElementById('frame')
let imgWrapper = document.createElement('div')
let imgSrc = [
'https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg',
'https://cdn.pixabay.com/photo/2016/12/09/06/22/the-beach-1893714__340.jpg',
'https://cdn.pixabay.com/photo/2017/12/05/01/12/sunset-2998295__340.jpg'
]
let animationInterval = 4
for (let currIndex = 0, imgNum = imgSrc.length; currIndex < imgNum; currIndex++) {
let imgElem = document.createElement('img')
imgElem.src = imgSrc[currIndex]
imgElem.alt = ''
imgElem.classList.add('photo')
imgElem.style['animation-name'] = 'fade'
imgElem.style['animation-duration'] = (imgNum * animationInterval) + 's'
imgElem.style['animation-iteration-count'] = 'infinite'
imgElem.style['animation-delay'] = (currIndex * animationInterval) + 's'
imgWrapper.appendChild(imgElem)
}
frame.appendChild(imgWrapper)
}
</script>
</head>
<body onload="setAnimation()">
<div id="frame" class="frame"></div>
</body>
</html>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】