如何借助CSS创建一个旋转木马？
旋转木马在互联网上非常有名。 网络旋转木马是一种优雅的方式，可以将相似的内容组织到一个触觉的地方，同时保留宝贵的网站空间。它们用于展示照片、提供产品，并吸引新访问者的兴趣。但是它们的效果如何？有很多反对旋转木马的论点，以及研究使用旋转木马来提高性能。但是旋转木马如何影响网站的可用性？
在本文中，我们将讨论轮播图的基础知识以及如何使用HTML和CSS创建轮播图。
什么是轮播图？
轮播图是一种幻灯片展示，可以显示一系列旋转的横幅/图片。轮播图通常出现在网站的首页上。它可以改善您的网站的外观。Web轮播图，也被称为滑块、画廊和幻灯片，允许您在一个动态的“滑动”块中显示文本、图形、图像甚至视频。它们是将内容和概念分组的优秀设计选择，可以在特定内容之间建立视觉链接。
Web轮播图因此非常适合在电子商务网站上推广相关产品，在设计作品集中展示特色项目，甚至在房地产网站上循环播放家居内外照片。然而，它们并不总是最佳选择。
许多设计师批评它们会减慢加载时间并破坏设计的流畅性。然而，与任何设计相关的事物一样，当正确地完成时，网页轮播可以以一种更容易遍历的方式分割内容。
如何制作一个网页轮播图？
在这里，我们将看到如何制作一个简单的网页轮播图，而不使用像Bootstrap这样的框架。
需要遵循的步骤
使用HTML创建走马灯的基本结构，其中包含图像。在下面的示例中，我们为走马灯添加了4张图像。此外，还有4个按钮，点击按钮将显示相应的图像。
首先，创建一个作为容器的 div 元素，其中包括 标题 和 内容。
现在，content div 包含两个部分- carousel content（包含在整个过渡过程中保持固定的文字部分）和 slideshow（包含移动部分，即4张图片和按钮）。
使用CSS来为轮播图像和按钮添加样式。保持幻灯片的位置为相对定位。
使用CSS动画使轮播中的图像平滑过渡。
Example
的中文翻译为：示例
以下示例演示了一个包含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 id="Responsive-Carousel-using-CSS"> 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 src="/static/imghw/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg" class="lazy" class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg" alt="如何借助CSS创建一个旋转木马？" >
</div>
<div class= "slide">
<img src="/static/imghw/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg" class="lazy" class= "img" alt="如何借助CSS创建一个旋转木马？" >
</div>
<div class= "slide">
<img src="/static/imghw/default1.png" data-src="https://i.insider.com/5fd90e7ef773c90019ff1293? style="max-width:90%" class="lazy" class= "img" alt="如何借助CSS创建一个旋转木马？" >
</div>
<div class= "slide">
<img src="/static/imghw/default1.png" data-src="https://wallpaperaccess.com/full/1164582.jpg" class="lazy" class= "img" alt="如何借助CSS创建一个旋转木马？" >
</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规则。
动画持续时间 - 设置动画的持续时间
动画时间函数 - 表示动画的速度曲线，即动画从一组CSS自定义属性变化到另一组所使用的时间间隔。
Animation-delay – 在给定的时间间隔内为起始值设置延迟
@keyframes用于指定在给定的时间段内动画中需要执行的代码。这是通过在动画期间为某些特定的“帧”声明CSS属性来实现的，百分比从0％（动画的开始）到100％（动画的结束）。
以上是如何借助CSS创建一个旋转木马？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
使您的第一个自定义苗条过渡
Mar 15, 2025 am 11:08 AM
Svelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
您如何使用CSS创建文本效果，例如文本阴影和渐变？
Mar 14, 2025 am 11:10 AM
文章讨论了使用CSS来获得阴影和渐变等文本效果，优化它们以进行性能并增强用户体验。它还列出了初学者的资源。（159个字符）
让我们使用（x，x，x，x）来谈论特殊性
Mar 24, 2025 am 10:37 AM
前几天我只是和埃里克·迈耶（Eric Meyer）聊天，我想起了我成长时代的埃里克·迈耶（Eric Meyer）的故事。我写了一篇有关CSS特异性的博客文章，以及
