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.背景 实际开发中用到支付宝支付的概念非常大...... 这里重点分析一下支付宝支付实际生产必须要实现的功能 1.获取支付链接(统一下单) 2.支付回调(异步通知) 3.统一下单交易查询 4.退款 ...

  2. oracle利用job实现存储过程异步执行

    1.背景 在实际开发中,我们可能会利用存储过程批量处理业务, 对应有些存储过程可能会执行很长时间,这时我们需要客户端点操作后,存储过程异步执行 具体实现如下 1.创建处理业务的存储过程:sp_test ...

  3. 【牛客刷题】HJ15 求int型正整数在内存中存储时1的个数

    题目链接 题倒是很简单,最开始用了这么一种解法: package main import "fmt" func main() { a := 0 fmt.Scan(&a) s ...

  4. 【CMake系列】10-cmake测试集成googletest与第三方库自动化构建

    cmake测试,使用ctest 可能不能满足我们的需求,需要我们使用更为强大的第三方测试框架,如googletest,完成项目中的测试工作 本篇文章将第三方测试框架 googletest,引入,同时也 ...

  5. Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe

    自研electron31+vite5桌面端高颜值后台管理解决方案ElectronViteAdmin. vite-electron31-admin原创基于electron31+vite5+vue3 se ...

  6. CF1693D--单调区间

    \(T_4\) 单调区间结题报告 题目描述 一句话题意:给定一个排列 \(a\) 算出有多少个区间 \([l , r]\) , 满足其可以划分为一个单调递增子序列和单调递减子序列,其中单调递增子序列长 ...

  7. Modbus ASCII 获取数据

    根据银河高低温试验箱协议读取数据 1.协议内容 8.1:通讯协议介绍 8.1.5 通讯设置 本通讯协议使用异步串行通讯方式,1 个起始位.8 个数据位.2 个停止 位.无奇偶校验数据通讯格式,其中数据 ...

  8. WinForm UI 库

    WinForm UI库 HZH_Controls HZHControls是基于.Net Framework4.0原生控件开发完全开源的一套控件,你不需要担心有其他控件或版权问题.提供完整的示例代码,方 ...

  9. 【测试平台开发】——06Flask后端api开发实战(三)——API接口关联数据库

    本章节演示如何创建接口服务,用接口关联数据库数据,包括get请求和post请求. 一.Flask-RESTful插件 restful api是用于在前端与后台进行通信的一套规范.使用这个规范可以让前后 ...

  10. How to set keyboard for xshell 8 beta? 快捷键设置

    今天发现xshell8 不能使用Ctrl + v,就找了一下攻略,发现版本不对,都是低版本的,针对还处于测试期间的xshell 8,没有攻略. 那就自己摸索吧,看了几眼,发现:xshell 8 挪位置 ...