CSS动画（轮播图）
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);
}
}
关键技术点如下：
Flexbox布局：
ul { display: flex; flex-wrap: nowrap; }：使用flex布局来水平排列列表项，并禁止换行。ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; }：设置列表项不收缩，宽高为100%，并使用box-sizing: border-box;来包含边框和内边距。图片样式：
ul li img { width: 100%; height: 100%; object-fit: cover; }：使图片占满整个列表项，并使用object-fit: cover;来保证图片的封面效果。动画效果：
ul和ul li的动画使用了animation属性，分别命名为move和move1，并使用了CSS变量--speed和--s来控制动画的速度和步数。@keyframes move和@keyframes move1：定义了两个关键帧动画，分别用于整个列表和单个列表项的移动。
无限循环：在
ul中末尾补了一个首尾数据，结合动画的步骤（steps(var(--s))）和无限循环（infinite），实现了无缝滚动效果。
CSS动画（轮播图）的更多相关文章
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- JavaScript--缓动动画+轮播图
上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 使用css实现轮播图
使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...
- 使用css制作轮播图
<!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- 纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
随机推荐
- nvidia显卡的售后真的是不敢要人恭维——拆机箱时误拧显卡自身挡板螺丝被拒保
事情比较简单,单位在nvidia的经销商那里购买的nvidia titan rtx显卡,保修期内坏掉,拆下来的过程中误拧了挡板的螺丝,结果被拒保,这里就是单纯的记录这件事情. 这件事确实我这方面有不对 ...
- cdq分治 提高篇
优化动态规划 序列 首先要会最长上升子序列的转移,这里就不说了. 我们 \(i\) 位置的初始值为 \(a_i\),可能变成的最大值为 \(mx_i\),可能变成的最小值为 \(mn_i\). 然后如 ...
- cdq分治 基础篇
简介 前置芝士:归并排序. \(cdq\) 分治是个离线算法,可以解决三维偏序或者优化 \(dp\). 陌上花开 维护三维偏序有个口诀:一维排序,二维归并,三维数据结构. 考虑第一维直接排序解决掉,然 ...
- Spring 相关知识
https://www.bilibili.com/video/BV1gW411W7wy?spm_id_from=333.788.b_636f6d6d656e74.173 老雷的Spring注解驱动 源 ...
- 结构体中vector的初始化报错:expected identifier before numeric constant
结构体中vector的初始化报错:expected identifier before numeric constant 结构体中vector初始化 起因: 我想在结构体中初始化含有3个元素的vect ...
- 23 暑假友谊赛 No.3
23 暑假友谊赛 No.3 Problem - B - Codeforces 贪心吧,每次看哪块瓷砖划算就尽量多的放哪块 #include <bits/stdc++.h> #define ...
- 瑞芯微rk356x板子快速上手
@ 目录 rk3568 CPU GPU NPU VPU 一.编译环境要求 二.编译前准备 0)开发板型号 1)安装第三方编译工具 2)设置adb路径 3)安装USB驱动DriverAssitant_v ...
- Plateau-Rayleigh 不稳定性 + Young-Laplace 方程
考虑竖直下落水柱中的 \(AB\) 两点 \[\begin{matrix} \displaystyle\frac12\rho U_0^2+\rho gz+P_A=\frac12\rho U^2(z)+ ...
- 全志T113s3工业开发板文章汇总
全志T113s3工业开发板 T113开发交流QQ群:120575746 交流论坛:https://forums.100ask.net/c/aw/ 文章目录汇总 教程共计7章,下面是章节汇总:第0章_T ...
- 光影精灵10 Win1+Ubuntu18.04 双系统 踩坑记录
前言 第二年准备报名智能车了,当然还是创意组别.刚好买了今年新出的电脑光影精灵10,我想着也给它安一个双系统.但是没想到,相比于之前那个老电脑,新电脑的新硬件和驱动问题远比老电脑麻烦的多. 在经历了一 ...