首页 > 文章 > 前端

创建 CSS 轮播的分步指南

来源：dev.to

时间：2024-07-09 20:18:58 392浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《创建 CSS 轮播的分步指南》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

创建 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；
}

背景图像和动画延迟

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

.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 轮播的分步指南》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除