CSS实现自动播放相册------Sestid

最新推荐文章于 2023-11-04 12:29:48 发布

Sestid

最新推荐文章于 2023-11-04 12:29:48 发布

阅读量894

点赞数 2

分类专栏：前端css部分❤️ Js和jQuery实现的特效❤️

本文链接：https://blog.csdn.net/Sestid/article/details/102892414

版权

Js和jQuery实现的特效❤️ 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

前端css部分❤️

14 篇文章 0 订阅

订阅专栏

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ew53xciF-1572680082129)(CSS实战笔记(五)] 动态相册/fade_image.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>

Sestid

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现自动播放相册------Sestid

效果展示：以下是两种实现方式（CSS或者js）CSS代码：<!DOCTYPE html><html><head> <style> html { background-color: black; width: 100%; height: 100%; display: ...
复制链接

扫一扫