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. 字符串系列目录&&说明

    字符串准备写成一个系列. 目录 \(\text{KMP笔记}\) \(\text{Manacher笔记}\) [] [] [] 格式与说明 下面的说明和格式将被应用于整个系列. 说明 所有字符串的下标 ...

  2. 介绍一款新奇的开源操作系统：GodoOS

    在快节奏的现代办公环境中,一款高效.集成化的操作系统无疑是提升工作效率的利器.今天,我们要为您隆重介绍 --GodoOS,一款专为内网办公环境设计的全能操作系统.它不仅仅是一个工具,更是您团队协作与文 ...

  3. 痞子衡嵌入式：探析i.MXRT1050在GPIO上增加RC延时电路后导致边沿中断误触发问题(上篇)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1050在GPIO上增加RC延时电路后导致边沿中断误触发问题探析. 前段时间有一个 RT1052 客户反馈了一个有趣的问题, ...

  4. vite创建的react项目如何兼容低版本安卓，低版本安卓不支持es6语法

    Vite 是一个现代化的前端构建工具,默认情况下,它会生成基于 ES6+ 的代码.这对于大多数现代浏览器来说是没有问题的,但对于一些较旧版本的安卓浏览器可能会遇到兼容性问题. 为了使 Vite 创建的 ...

  5. 微服务开发手册之GRPC 荐

    GRPC是一个高性能.通用的开源RPC框架,基于HTTP/2协议标准和Protobuf序列化协议开发,支持众多的开发语言. @[TOC] 1 简介 在GRPC框架中,客户端可以像调用本地对象一样直接调 ...

  6. springboot之banner.txt

    在springboot启动过程中,我们经常可以看到控制台打印下面图文: 实际上这个打印图文,是可以自定义的,可以在springboot的resource中创建一个banner.txt文件,在启动时就会 ...

  7. React项目接入代码编辑器aceEditor

    不建议去查看aceEditor官方,最好去github查看 安装命令: npm install react-ace 引入包: import AceEditor from 'react-ace'; im ...

  8. [golang]查询ssl证书剩余有效天数并邮件提醒

    前言 自从云厂商的免费ssl证书改成3个月,而且证书数量还是20个之后,自己网站的ssl证书就换成了其它免费方案.但是免费方案不会提醒证书过期,所以写个工具每天定时查询证书剩余有效天数,如果证书即将过 ...

  9. redis zset 使用场景

    前文,我们讨论过redis 的数据结构及使用场景.可参考: 参考: 总结篇4:redis 核心数据存储结构及核心业务模型实现应用场景 https://www.cnblogs.com/yizhiamum ...

  10. c++实现几种常见排序算法

    一.快速排序 int getPivot(vector<int>& arr, int left, int right){ int tmp = arr[left]; while(lef ...