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. MD5签名生成,字典排序,实际生产

    1.背景 作用:防止请求参数篡改,限制请求时效性: 常用方式:md5签名 关键:签名Key 常用签名原串排列:字母顺序.key1=value1&key2=value2....key (注意:签 ...

  2. 构建无服务器数仓（二）Apache DolphinScheduler 集成以及 LOB 粒度资源消费分析

    引言 在数据驱动的世界中,企业正在寻求可靠且高性能的解决方案来管理其不断增长的数据需求.本系列博客从一个重视数据安全和合规性的 B2C 金融科技客户的角度来讨论云上云下混合部署的情况下如何利用亚马逊云 ...

  3. WPF如何给window加阴影效果

    <Style x:Key="WindowStyle1" TargetType="{x:Type Window}"> <Setter Prope ...

  4. 2023上海理工大学校内选拔赛A-D题

    前言 不要在意标题,既然是随记,就随性点() 今天参加了2023年中国高校计算机大赛-团队程序设计天梯赛(GPLT)上海理工大学校内选拔赛(同步赛)_ACM/NOI/CSP/CCPC/ICPC算法编程 ...

  5. MPTCP(六)：MPTCP测试

    MPTCP测试 1.注意事项 测试主机已替换支持MPTCPv1的内核,并且已使能MPTCP,本次测试中使用的内核版本均为5.18.19 测试主机中确保已经正确配置了iproute2 和 mptcpd, ...

  6. 软件开发工程师，几款常用的APP，你用过几款？最后一个测试网络必备

    作为一名程序员,手机里一定有几个常用的app,下面给大家推荐几款. 1. CSDN 国内最大编程论坛:虽然有多少人吐槽现在使用csdn就像屎里淘金, 但是不得不承认他仍然是大家搜索技术资料.问题的首选 ...

  7. GPL前世今生

    从事Linux开发的朋友一定都听过GPL,那么到底什么是GPL呢?他有什么作用呢?本文给大家做详细讲解. 一.GNU/GPL 在讲解GPL之前,我们必须先了解什么是GNU? 1. 什么是GNU GNU ...

  8. C#实现国产Linux视频录制生成mp4（附源码，银河麒麟、统信UOS）

    随着信创国产化浪潮的来临,在国产操作系统上的应用开发的需求越来越多,最近有个客户需要在银河麒麟或统信UOS上实现录制摄像头视频和麦克风声音,将它们录制成一个mp4文件.那么这样的功能要如何实现了? 一 ...

  9. 设计模式之cglib动态代理

    什么是动态代理呢?动态代理就是在java进程运行时,通过字节码技术,动态的生成某个类的代理类.在这个代理类中,我们可以做一些额外的操作,一方面仍然保持原有的方法的能力,另外一方面还增强了这些能力.听着 ...

  10. MFC添加图标到托盘

    MFC窗口实现最小化到托盘 右键菜单和还原 //.h文件 void toTray();//最小化到托盘 void DeleteTray();//删除托盘图标 afx_msg LRESULT OnSho ...