CSS实战笔记(五) 动态相册

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 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'
        frame.appendChild(imgElem)
      }
    }
  </script>
</head>

<body onload="setAnimation()">
  <div id="frame" class="frame"></div>
</body>

</html>

【阅读更多 CSS 系列文章，请看 CSS学习笔记】