css如何实现幻灯片效果

实现方法：首先定义多张幻灯片元素；然后使用“@keyfr am es”规则和animation属性定义动画；接着在动画中根据幻灯片数量定义关键帧；最后在关键帧中使用“transform:trans latex ()”样式实现切换效果。

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

通过trans From 属性进行2D转换

html代码：

<section id=box>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>1</li>
  </ul>
</section>

css代码：

<style>
    * {
      m arg in: 0;
      padding: 0;
      font-f ami ly:  微软雅黑 ;
      list -s tyle: none;
    }
     # box{
        width:400px;
        h ei ght:200px;
        border: 1px solid #000;
        mar gin : 50px auto;
        overflow: hidden;
    }
    ul{
      width: 2000px;
      animation: dh 10s infin IT e ease;
    }
    ul li{
      width:400px;
      height:200px;
      float: left;
    }
    ul li:nth-child(1){
      background:#4b86db;
    }
    ul li:nth-child(2){
      background:#ff9999;
    }
    ul li:nth-child(3){
      background:olivedrab;
    }
    ul li:nth-child(4){
      background:skyblue;
    }
    ul li:nth-child(5){
      background:#4b86db;
    }
 
@keyframes dh {
      0%{transform: translateX(0)}
      25%{transform: translateX(-400px)}
      50%{transform: translateX(-800px)}
      75%{transform: translateX(-1200px)}
      100%{transform: translateX(-1600px)}
}
  </style>

推荐学习：css视频教程

以上就是css如何实现幻灯片效果的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css如何实现幻灯片效果 全部内容，希望文章能够帮你解决 css如何实现幻灯片效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css如何实现幻灯片效果的详细内容...