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视频教程

【文章原创作者：站群服务器 http://www.558idc.com/mggfzq.html 欢迎留下您的宝贵建议】