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. 读论文《IMPALA: Scalable Distributed Deep-RL with Importance Weighted Actor-Learner Architectures》——（续）实验部分

    论文地址: https://arxiv.org/pdf/1802.01561v2.pdf 论文<IMPALA: Scalable Distributed Deep-RL with Importa ...

  2. java多线程之-不可变final

    1.背景 final这个关键字相信大家不陌生吧... 看看下面的案例 2.时间格式化之线程不安全SimpleDateFormat package com.ldp.demo08final; import ...

  3. .Net Aspire次体验

    上次用上了在微软MVP的带领下用上了Aspire,在开发阶段隐藏了细节,什么都不用做,点个调试按钮就跑起来了,可是部署时出现了难题, 因为发布时只能选择Azure环境,为此注册了Azure,开了科网. ...

  4. 如何在 Recovery 中启用应用

    如果因为禁用了某个应用手机无法开机,那么你需要这个方法来救命 https://xdaforums.com/t/enable-or-disable-apps-directly-from-the-file ...

  5. 如何让你的C语言程序打印的log多一点色彩？（超级实用）

    接着上一篇文章<由字节对齐引发的一场"血案" > 在平常的调试中,printf字体格式与颜色都是默认一致的. 如果可以根据log信息的重要程度,配以不同的颜色与格式,可 ...

  6. 网卡DM9000裸机驱动详解

    一.网卡 1. 概念 网卡是一块被设计用来允许计算机在计算机网络上进行通讯的计算机硬件.由于其拥有MAC地址,因此属于OSI模型的第2层.它使得用户可以通过电缆或无线相互连接. 每一个网卡都有一个被称 ...

  7. 玄机蓝队靶场_应急响应_02:apache日志分析

    日志分析这块,感觉都是对grep.awk.sort.wc.uniq,这几个命令的使用. 一:靶场 (1)直接cd到linux日志, cd /var/log 发现apache2目录, cd ./apac ...

  8. 云存储抽象层-FluentStorage

    FluentStorage 是一个.NET云存储抽象层,支持多种云服务提供商.它提供了一个统一的API来处理不同云服务提供商的Blob存储(如AWS S3, GCP, FTP, SFTP, Azure ...

  9. （赠书）国产开源视觉语言模型CogVLM2在线体验：竟能识别黑悟空

    CogVLM2是一款视觉语言模型(Visual Language Model),由智谱AI和清华KEG潜心打磨.这款模型是CogVLM的升级版本,支持高达 1344 * 1344 的图像分辨率,提供支 ...

  10. 计算机网络之TCP/IP协议简介

    TCP/IP协议 简介 首先TCP/IP协议不只是表示TCP协议和IP协议两种协议,而是一个协议簇.协议簇是什么并不难理解,就是字面意思,一个由多个协议组合而成的集合体,其中最有代表性的就是TCP和I ...