创建 CSS 轮播的分步指南

PHPz

发布时间：2024-07-10 09:40:45

300人浏览过

来源于dev.to

转载

创建 css 轮播的分步指南

纯 CSS 轮播可以是展示图像或内容的优雅且高性能的方式。本指南解释了如何仅使用 HTML 和 CSS 创建简单而有效的轮播。

工作演示

您可以在 JSFiddle 上查看工作演示并与之交互：CSS Carousel Demo

HTML结构

HTML 结构由充当包装器的article 元素组成。在这个包装器内部，有一个容器 div，后跟一个行 div，在其中，幻灯片 div 包含幻灯片列表。


   
     
       
         
           SKUP AUT SPRAWNYCH I USZKODZONYCH 
GOTÓWKA DO RĘKI
           SKUP AUT POZNAŃ I WIELKOPOLSKA 
ZADZWOŃ
           SKUP AUT SPRAWNYCH I 
USZKODZONYCH - GOTÓWKA DO RĘKI

CSS 样式

幻灯片容器

.slideshow 类将幻灯片居中，设置其最大宽度，并使其响应。

.幻灯片{
    边距：0px 自动；
    最大宽度：1920px；
    宽度：100%；
    高度：450像素；
    文本对齐：居中；
    位置：相对；
}

横幅样式
.baner 类将列表绝对定位在幻灯片容器内。

.baner {
    位置：绝对；
    左填充：0；
    宽度：100%；
    高度：450像素；
    顶部：50 像素；
    左：0；
    右：0；
}

列表项没有默认的列表样式。

.baner 李 {
    列表样式：无；
}

幻灯片样式

立即学习“前端免费学习笔记（深入）”；

列表项内的 span 元素的样式覆盖整个幻灯片区域，并且绝对定位。

.baner li span {
    顶部填充：180px；
    字体大小：40px；
    位置：绝对；
    宽度：100%；
    高度：100%；
    顶部：0；
    左：0；
    白颜色;
    字体粗细：400；
    文本对齐：左对齐；
    字母间距：4px；
    字体系列：open-sans、sans-serif；
    背景大小：封面；
    背景位置：50% 50%；
    不透明度：0；
    z 索引：2；
    动画：imageAnimation 15s 缓动无限 0s；
}

叠加
伪元素用于在文本上创建黑色叠加层。

.baner li span::after {
    内容： ””;
    背景颜色：#00000066；
    宽度：50%；
    高度：25%；
    顶部：170 像素；
    位置：绝对；
    左：0px；
    z 索引：-1；
}

背景图像和动画延迟

Veggie AI

Veggie AI 是一款利用AI技术生成可控视频的在线工具

下载

每张幻灯片都有一个背景图像和不同的动画延迟来创建幻灯片效果。

.baner li:nth-child(1) span {
    背景图像：url（https://images.pexels.com/photos/19964831/pexels-photo-19964831/free-photo-of-blue-heron.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load）；
}

.baner li:nth-child(2) 跨度 {
    背景图像：url(https://images.pexels.com/photos/12412489311/pexels-photo-12412489311.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load);
    动画延迟：5s；
}

.baner li:nth-child(3) 跨度 {
    背景图像：网址（https://images.pexels.com/photos/20744632/pexels-photo-20744632/free-photo-of-a-church-sits-on-top-of-a-hill-overlooking- a-valley.jpeg？auto=compress&cs=tinysrgb&w=600&lazy=load);
    动画延迟：10s；
}

关键帧动画

@keyframes 规则定义了幻灯片的淡入和淡出动画。

@keyframes imageAnimation {
    0% {
        不透明度：0；
    }
    13% {
        不透明度：1；
    }
    25% {
        不透明度：1；
    }
    37% {
        不透明度：0；
    }
    100% {
        不透明度：0；
    }
}

解释

1.结构和布局： HTML 设置了轮播的基本结构。 CSS 确保幻灯片居中并占据其容器的整个宽度。

2.定位和样式： 每张幻灯片都绝对定位以占据容器的整个空间。伪元素添加半透明覆盖层以提高文本可读性。

3.背景和动画： 每张幻灯片都分配有一个背景图像。动画延迟使每张幻灯片的外观错开，从而创建无缝过渡。

4.关键帧动画： 关键帧动画处理不透明度的变化，使每张幻灯片以指定的间隔淡入和淡出。

结论

本指南涵盖了创建纯 CSS 轮播的基础知识。通过了解 HTML 结构和 CSS 动画，您可以构建和自定义轮播以满足各种需求。工作演示提供了一个实际示例，您可以探索和修改。

css框架如何自定义主题颜色_通过变量覆盖和自定义样式表实现

css 浮动布局适合用在什么场景_通过历史布局方案分析

css 使用 clear 清除浮动会影响布局吗_通过元素换行机制说明

css 想让图标颜色可继承怎么办_fill currentColor

css 使用空标签清除浮动是否合理_通过语义和规范角度说明

相关标签:

css 绝对定位 css html 伪元素

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML 元素下一篇：HTML 表单属性

作者最新文章

如何在Spryker项目中实现前端与后端高效通信？Spryker/Zed-Request与Composer助你轻松连接！

2025-09-12 12:40

如何高效生成唯一ID？Ramsey/Uuid助你解决分布式系统中的ID难题

2025-09-13 09:51

Yii2数据库迁移总是手动写？insolita/yii2-migration-generator助你告别繁琐，实现自动化！

2025-09-15 09:38

如何解决复杂系统可视化难题，Spryker/Graphviz助你轻松绘制依赖与状态图

2025-09-15 09:52

如何高效生成订单/发票号？SprykerSequenceNumber模块助你轻松搞定

2025-09-16 10:01

如何解决电商平台商品属性管理混乱的问题，使用SprykerProductAttribute模块助你实现灵活高效的数据管理

2025-09-16 12:23

解锁夸克浏览器AI搜索新功能_掌握夸克AI搜索的进阶玩法

2025-10-13 17:08

升级夸克浏览器体验AI搜索_夸克AI搜索核心功能深度解析

2025-10-28 20:58

微信朋友圈能不能定时发微信朋友圈定时发送辅助工具使用

2026-01-11 08:41

企业微信朋友圈怎么定时发送企业微信定时发布朋友圈教程

2026-01-19 01:11

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

524

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

265

2023.07.27

css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面，使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。

758

2023.07.28

css超出显示...

在CSS中，当文本内容超出容器的宽度或高度时，可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章，相关教程，供大家免费体验。

539

2023.08.01

css字体颜色

CSS中，字体颜色可以通过属性color来设置，用于控制文本的前景色，字体颜色在网页设计中起到很重要的作用，具有以下表现作用：1、提升可读性；2、强调重点信息；3、营造氛围和美感；4、用于呈现品牌标识或与品牌形象相符的风格。

761

2023.08.10

什么是css

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页（或其他基于 XML 的文档）样式与布局的标记语言，CSS的作用和意义如下：1、分离样式和内容；2、页面加载速度优化；3、实现响应式设计；4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写

CSS可以通过多种方式实现三角形形状，本专题为大家提供css三角形怎么写的相关教程，大家可以免费体验。

560

2023.08.21

css设置文字颜色

CSS（层叠样式表）可以用于设置文字颜色，这样做有以下好处和优势：1、增加网页的可视化效果；2、突出显示某些重要的信息或关键字；3、增强品牌识别度；4、提高网页的可访问性；5、引起不同的情感共鸣。

397

2023.08.22

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

热门下载

网站特效

网站源码

网站素材

前端模板