css如何实现幻灯片效果

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

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

通过transFrom属性进行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>
    * {
          margin: 0;
          padding: 0;
          font-family: 微软雅黑;
          list-style: none;
    }
    #box{
            width:400px;
            height:200px;
            border: 1px solid #000;
            margin: 50px auto;
            overflow: hidden;
    }
    ul{
          width: 2000px;
          animation: dh 10s infinITe 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如何实现幻灯片效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！