1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa78enaFEibNNCoXO9Hr2PI7boFTRgZHl3icicXwzLGLTQPxClhQAQiabWL41pTOQLLwgOBlbGrzq1Rwtw/640?wx_fmt=gif&from=appmsg&wxfrom=13

轮播图是一种常见的视觉元素，用于展示图片、信息或故事。CSS轮播图动画通过平滑的过渡效果和动态的视觉表现，极大地增强了轮播图的吸引力和用户体验。本文将探讨如何使用CSS来创建一个响应灵敏、动画流畅的轮播图，让网站内容的展示更加生动和有趣。

2.完整代码

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <link rel="stylesheet" type="text/css" href="6_11.css">

</head>

<body>

<div class="g-container">

    <ul style="--s: 4">

        <li>

            <img src="./1.png">

        </li>

        <li>

            <img src="./2.png">

        </li>

        <li>

            <img src="./3.png">

        </li>

        <li>

            <img src="./4.png">

        </li>  

        <!--末尾补一个首尾数据-->

        <li>

            <img src="./1.png">

        </li>

    </ul>

</div>

</body>

</html>

CSS

* {

    padding: 0;

    margin: 0;

}  

li {

    list-style: none;

}  

body,

html {

    width: 100%;

    height: 100%;

    display: flex;

}  

:root {

    --w: 400;

    --speed: 2s;

}  

.g-container {

    width: 400px;

    margin: auto;

    height: 240px;

    line-height: 240px;

    font-size: 20px;

    background: #673ab7;

    color: #fff;

    overflow: hidden;

    border: 2px solid #766c6c;

}  

ul {

    display: flex;

    flex-wrap: nowrap;

}  

ul li {

    flex-shrink: 0;

    width: 100%;

    height: 100%;

    box-sizing: border-box;

}  

ul li img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}  

ul {

    animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;

}  

ul li {

    white-space: nowrap;

    cursor: pointer;

    animation: move1 calc(var(--speed)) infinite;

}  

@keyframes move {

    0% {

        transform: translate(0, 0px);

    }  

    100% {

        transform: translate(calc(var(--s) * var(--w) * -1px), 0);

    }

}  

@keyframes move1 {

    0% {

        transform: translate(0, 0px);

    }  

    80%,

    100% {

        transform: translate(calc(var(--w) * -1px), 0);

    }

}

关键技术点如下：

  1. Flexbox布局：
    ul { display: flex; flex-wrap: nowrap; }：使用flex布局来水平排列列表项，并禁止换行。

  2. ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; }：设置列表项不收缩，宽高为100%，并使用box-sizing: border-box;来包含边框和内边距。

  3. 图片样式：

  4. ul li img { width: 100%; height: 100%; object-fit: cover; }：使图片占满整个列表项，并使用object-fit: cover;来保证图片的封面效果。

  5. 动画效果：

    1. ul 和 ul li 的动画使用了animation属性，分别命名为move和move1，并使用了CSS变量--speed和--s来控制动画的速度和步数。
    2. @keyframes move 和 @keyframes move1：定义了两个关键帧动画，分别用于整个列表和单个列表项的移动。

  6. 无限循环：在ul中末尾补了一个首尾数据，结合动画的步骤（steps(var(--s))）和无限循环（infinite），实现了无缝滚动效果。

CSS动画（轮播图）的更多相关文章

  1. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  2. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  3. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  4. JavaScript--缓动动画+轮播图

    上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  5. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  6. 使用css制作轮播图

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...

  7. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  8. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  9. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  10. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

随机推荐

  1. java多线程之自定义线程池

    1.背景 线程池.....大家常用.... 自己搞一个,顺便练习一下多线程编程 2.自定义线程代码 2.1.拒绝策略接口 @FunctionalInterface public interface M ...

  2. .NET 8 + Blazor 多租户、模块化、DDD框架、开箱即用

    前言 基于 .NET 8 的开源项目,主要使用 WebAPI + Blazor 支持多租户和模块化设计,DDD构建.可以帮助我们轻松地搭建起一个功能完善的Web应用程序.除了帮助你快速构建应用程序之外 ...

  3. 【题解】ABC365（A~E）

    前四题30min切,然后T5死磕70min+几发小唐错,距离比赛结束还有16s交最后一发,AC了. 目录 A. Leap Year 题目描述 思路 代码 B. Second Best 题目描述 思路 ...

  4. 【全】CSS动画大全之按钮【b】

    效果预览 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  5. Synology NAS GitLab 配置

    安装 安装的时候会提示服务器名.root用户名等,这步服务器名千万不要写错,不然会登不上去,提示 502. root 密码 网上有很多说 root 密码怎么获取的,但是都不适用. 实际上是第一个访问 ...

  6. .net core下使用事件总线

            随着微服务的火热,DDD(领域驱动设计模式)思想风起云涌,冲击着整个软件生态系统.其中,事件总线那是必须知道的了,于是我便抱着一个学习DDD的心态搭建了一个博客网站,目前该网站正在建设 ...

  7. chezmoi 使用

    chezmoi(发音 /ʃeɪ mwa/ (shay-moi)):在多台不同的机器上安全地管理你的 dotfiles. 安装 macOS: brew install chezmoi Ubuntu: s ...

  8. html 跳转到新的网址

    更新window.location.href后面的值即可 文件名为 index.html <!DOCTYPE html> <html> <head> <met ...

  9. C语言数据的存储

    目录 类型的基本归类 整形在内存中的存储 原码.反码.补码 大小端介绍 练习 浮点型在内存中的存储 浮点数存储的例子 浮点数存储规则 类型的基本归类 整形家族: char unsigned char ...

  10. CamoTeacher：玩转半监督伪装物体检测，双一致性动态调整样本权重 | ECCV 2024

    论文提出了第一个端到端的半监督伪装目标检测模型CamoTeacher.为了解决半监督伪装目标检测中伪标签中存在的大量噪声问题,包括局部噪声和全局噪声,引入了一种名为双旋转一致性学习(DRCL)的新方法 ...