下面的是PPT教程网给你带来的相关内容：

ppt怎么制作图片滚动播放:使用HTML+CSS实现图片滚动效果

使用HTML+CSS实现图片滚动效果

之前用js实现过图片切换的效果ppt怎么制作图片滚动播放，今天实现图片滚动的特效，这里不包含图片的切换。

直接上代码：

<div class="loopimg">
       <ul>
        <li>
         <img src="img/运动/运动 - 21.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 32.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 51.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 75.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 77.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 95.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 96.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 21.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 32.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 51.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 75.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 77.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 95.jpg" height="200px"/>
        li>
        <li>
         <img src="img/运动/运动 - 96.jpg" height="200px"/>
        li>
       ul>
      div>

这里共嵌套3层。div-ul-li，动画效果放在ul中ppt怎么制作图片滚动播放:使用HTML+CSS实现图片滚动效果，li样式使用float-left，使图片水平排列。一共有7张图片，重复一遍，也就是一共有14张图片。

.loopimg{
 width: 4173px;
 height: 200px;
 margin: 0px auto;
 padding: 0px;
 overflow: hidden;
}
.loopimg > ul{ 
 width: 100%;
 /*动画名称*/
 animation-name: move;
 /*动画时间*/
 animation-duration: 15s;
 /*动画次数*/
 animation-iteration-count: infinite;
 /*匀速*/
 animation-timing-function: linear;
  }
.loopimg > ul > li{
 float: left;
 list-style: none;
 }
#foot{
 border: 1px solid black;
 height: 80px;
 width: 100%;
 text-align: center;
}
@keyframes move {
  /*动画起始位置*/
  0%{
  transform: translateX(0px);
  }
 /*动画结束状态*/
 100%{
  transform: translateX(-2086.24px);
  }
 }

其中DIV为放图片的容器，设置为：，也就是超过的部分忽略。

div的宽度就设置为页面中的宽度，ul的宽度设置为所有图片的宽度之和，li样式为none，向左浮动。

接下来是动画设置：@ move，2086.24是7张图片的宽度，也就是ul从像素0移动到像素-2048.24。也就是一次动画滚动7张图片，我放14张是为了不显示空白。至于ul中动画的各种设置，代码中已经有了注释了最终效果如下。

感谢你支持pptjcw.com网，我们将努力持续给你带路更多优秀实用教程！

上一篇：ppt动画效果怎么设置一个出来一个消失:用PPT做了一个动态“OPPO”​官网，这波操作秀翻了全场【PPT教程】 下一篇：ppt视频录制:ppt录屏没有声音？

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。