纯CSS实现首尾相接的无限轮播效果

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      * {
        --w: 300;
        --s: 6;
        --speed: 2s;
      }
      .g-container {
        width: calc(var(--w) * 1px);
        overflow: hidden;
        border: 1px solid red;
      }
      ul {
        display: flex;
        flex-wrap: nowrap;
        animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
        transition: 1s;
      }
      ul img {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: liMove calc(var(--speed)) infinite;
      }
      @keyframes move {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(calc(var(--s) * var(--w) * -1px), 0);
        }
      }
      @keyframes liMove {
        0% {
          transform: translate(0, 0);
        }
        80%,
        100% {
          transform: translate(calc(var(--w) * -1px), 0);
        }
      }
    </style>
  </head>

  <body>
    <div class="g-container">
      <ul>
        <img src="./1.png" alt="">
        <img src="./2.png" alt="">
        <img src="./3.png" alt="">
        <img src="./4.png" alt="">
        <img src="./5.png" alt="">
        <img src="./6.png" alt="">
        <img src="./1.png" alt="">
      </ul>
    </div>
  </body>
</html>
相关推荐
持久的棒棒君2 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆4 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz4 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou04 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干5 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大5 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu5 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端5 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao6 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫6 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor