使用css怎么实现一个幻灯片效果

发布时间：2021-04-15 18:11:13 阅读：218 作者：Leah 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇文章给大家分享的是有关使用css怎么实现一个幻灯片效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

通过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怎么实现一个幻灯片效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

使用css怎么实现一个幻灯片效果

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签