css教程css如何实现幻灯片效果

 所属分类:web前端开发

 浏览:321次-  评论: 0次-  更新时间:2022-10-19
描述:更多教程资料进入php教程获得。 实现方法:首先定义多张幻灯片元素;然后使用“@keyframes”规则和animation属性定义动画;接着在动画中根...
更多教程资料进入php教程获得。

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

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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如何实现幻灯片效果的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: css,幻灯片,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!