数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建轮播图？
轮播图在互联网上非常常见。网页轮播图是一种优雅的方式，可以将类似的素材组织到一个触手可及的地方，同时保留宝贵的网站空间。它们用于显示照片、提供产品以及吸引新访客的兴趣。但它们的效果如何？有许多反对轮播图的论点，以及关于使用轮播图来提高性能的研究。但是，轮播图如何影响网页可用性呢？
在本文中，我们将讨论轮播图的基础知识以及如何使用 HTML 和 CSS 创建轮播图。
什么是轮播图？
轮播图是一种幻灯片类型，用于显示一系列旋转的横幅/图像。轮播图通常位于网站的首页。它可以提升网站的外观。网页轮播图，也称为滑块、画廊和幻灯片，允许您在一个动态的“滑动”块中显示文本、图形、图像甚至视频。它们是组合内容和概念的绝佳设计选择，使您可以建立特定内容片段之间的视觉联系。
因此，网页轮播图非常适合在电子商务网站上推广相关产品，在设计作品集中展示特色项目，或者甚至在房地产网站上循环浏览房屋的室内和室外照片。但是，它们并不总是最佳选择。
许多设计师批评它们会减慢加载时间并破坏设计的流程。但是，与任何与设计相关的事物一样，如果操作得当，网页轮播图可以以一种更易于浏览的方式划分内容。
如何制作网页轮播图？
在这里，我们将了解如何在不使用 Bootstrap 等框架的情况下制作一个简单的网页轮播图。
需要遵循的步骤
使用 HTML 创建轮播图的基本结构，其中包含图像。在以下示例中，我们为轮播图添加了 4 张图像。此外，还有 4 个按钮，点击它们将显示相应的图像。
首先，创建一个充当容器的 div 元素，其中包含标题和内容。
现在，内容 div 包含两个部分 - 轮播内容（包含在整个转换过程中保持固定的书面部分）和幻灯片（包含移动部分，即 4 张图像和按钮）。
使用 CSS 样式化轮播图像和按钮。将幻灯片的定位设置为相对。
使用 CSS 动画使轮播中图像的过渡平滑。
示例
以下示例演示了一个包含 4 张图像和按钮的轮播图，这些按钮控制图像的显示。图像以固定的时间间隔过渡显示。
<!DOCTYPE html>
<html>
<head>
<title> Web Carousel </title>
<style>
* {
box-sizing: border-box;
margin: 10px;
padding: 3px;
}
body {
background-color: rgb(195, 225, 235);
}
.box {
width: 600px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.title {
padding: 10px 0 10px 0;
position: absolute;
top: 10px;
}
.content {
position: relative;
top: 10%;
}
.carousel-content {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-40%, -40%);
text-align: center;
z-index: 50;
}
.carousel-title {
font-size: 48px;
color: black;
margin-bottom: 1rem;
font-family: Times New Roman;
}
.slideshow {
position: relative;
height: 100%;
overflow: hidden;
}
.wrapper {
display: flex;
width: 400%;
height: 100%;
top: 10%;
border-radius: 30%;
position: relative;
animation: motion 20s infinite;
}
.slide {
width: 80%;
height: 200%;
border-radius: 30%;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes motion {
0% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
25% {left: -100%;}
30% {left: -200%;}
40% {left: -200%;}
45% {left: -300%;}
55% {left: -300%;}
60% {left: -200%;}
70% {left: -200%;}
75% {left: -100%;}
85% {left: -100%;}
90% {left: 0%;}
}
.button {
position: absolute;
bottom: 3%;
left: 50%;
width: 1.3rem;
height: 1.3rem;
background-color: red;
border-radius: 50%;
border: 0.2rem solid #d38800;
outline: none;
cursor: pointer;
transform: translateX(-50%);
z-index: 70;
}
.button-1 {
left: 20%;
}
.button-2 {
left: 25%;
}
.button-3 {
left: 30%;
}
.button-4 {
left: 35%;
}
.button-1:focus~.wrapper {
animation: none;
left: 0%;
}
.button-2:focus~.wrapper {
animation: none;
left: -100%;
}
.button-3:focus~.wrapper {
animation: none;
left: -200%;
}
.button-4:focus~.wrapper {
animation: none;
left: -300%;
}
.button:focus {
background-color: black;
}
</style>
</head>
<body>
<div class= "box">
<h1 class= "title"> Responsive Carousel using CSS </h1>
<div class= "content">
<div class= "carousel-content">
</div>
<div class= "slideshow">
<button class= "button button-1"> </button>
<button class= "button button-2"> </button>
<button class= "button button-3"> </button>
<button class= "button button-4"> </button>
<div class= "wrapper">
<div class= "slide">
<img class= "img" src= "https://tutorialspoint.com/static/images/simply-easy-learning.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?width=700">
</div>
<div class= "slide">
<img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Transform 属性
要修改视觉格式化模型使用的坐标空间，请在 CSS 中使用 transform 属性。这样做，可以将倾斜、旋转和平移等效果应用于元素。
语法
transform: none| transform-functions| initial| inherit;
值
translate(x, y) − 此函数定义沿 X 和 Y 坐标的平移。
translate3d(x, y, z) − 此函数提供沿 X、Y 和 Z 坐标的平移。
initial − 将元素设置为其默认值。
inherit − 它采用其父元素的值。
CSS 动画
CSS 的 animation 属性允许我们在特定时间间隔内更改元素的各种样式属性，从而使其产生动画效果。
动画的一些属性如下所示 -
Animation-name – 它使我们能够指定动画的名称，该名称随后由 @keyframes 用于指定要与该动画一起执行的 CSS 规则。
Animation-duration – 设置动画的持续时间
Animation-timing-function – 指示动画的速度曲线，即动画用于从一组 CSS 自定义属性更改到另一组 CSS 自定义属性的时间间隔。
Animation-delay – 使给定时间间隔的起始值延迟
@keyframes 用于精确指定在给定持续时间内动画期间需要执行哪些代码。这是通过在动画期间的某些特定“帧”中声明 CSS 属性来完成的，百分比从 0%（动画开始）到 100%（动画结束）。
922 次浏览
