纯 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；}
登录后复制
背景图像和动画延迟
每张幻灯片都有一个背景图像和不同的动画延迟来创建幻灯片效果。
.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/12489311/pexels-photo-12489311.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 轮播的分步指南的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2855039.html
