1、效果演示
网络异常，图片无法展示
|
2、完整代码
（1）直接通过 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>
（2）通过 JavaScript 控制 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; } @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>
