效果展示：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ew53xciF-1572680082129)(CSS實戰筆記(五)] 動態相冊/fade_image.gif)](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191102153519925.gif)
以下是兩種實現方式（CSS或者js）
CSS代碼：
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: black;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.frame {
width: 500px;
min-width: 500px;
height: 300px;
min-height: 300px;
border-width: 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>
JavaScript實現的代碼：
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: black;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.frame {
width: 500px;
min-width: 500px;
height: 300px;
min-height: 300px;
border-width: 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>