纯 CSS 轮播可以是展示图像或内容的优雅且高性能的方式。本指南解释了如何仅使用 HTML 和 CSS 创建简单而有效的轮播。
工作演示
您可以在 JSFiddle 上查看工作演示并与之交互:CSS Carousel Demo
HTML结构
HTML 结构由充当包装器的article 元素组成。在这个包装器内部,有一个容器 div,后跟一个行 div,在其中,幻灯片 div 包含幻灯片列表。
<article id="top" class="wrapper style1"><div>
<div>
<div class="幻灯片">
<ul class="baner">
<li><span>SKUP AUT SPRAWNYCH I USZKODZONYCH <br>GOTÓWKA DO RĘKI</span></li>
<li><span>SKUP AUT POZNAŃ I WIELKOPOLSKA <br>ZADZWOŃ</span></li>
<li><span>SKUP AUT SPRAWNYCH I <br>USZKODZONYCH - GOTÓWKA DO RĘKI</span></li>
</ul>
</div>
</div>
</div>
文章>
</article>
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 动画,您可以构建和自定义轮播以满足各种需求。工作演示提供了一个实际示例,您可以探索和修改。