一、引言
在如今追求极致用户体验和视觉美感的网页设计潮流中，CSS 作为网页样式设计的核心技术，展现出了强大的表现力和创造力。从简单的布局调整到复杂的动画效果实现，CSS 不断突破边界。本次我们将深入探索 CSS 的奇妙世界，利用纯 CSS 代码打造一个栩栩如生的旋转摩天轮，并且每个轿厢中还坐着形态可爱的小人。这个项目不仅能让我们更深入地理解 CSS 的各种属性和动画机制，还能为网页增添独特的动态魅力，提升用户的交互体验。
二、实现思路
要成功实现这个旋转摩天轮的效果，我们需要有条不紊地进行以下几个关键步骤：
- 规划 HTML 结构：精心设计并搭建摩天轮、轿厢、小人以及相关辅助元素的 HTML 结构，为后续的样式设置和动画实现奠定坚实基础。确保每个元素都有合理的层级关系和标识，便于在 CSS 中进行精准操作。
- 设计 CSS 样式：运用 CSS 的丰富样式属性，如布局属性（
position、display等）、颜色属性（background-color、border-color等）、阴影属性（box-shadow）以及渐变属性（linear-gradient）等，对摩天轮的各个部分进行细致的样式设计，使其在视觉上更加逼真和吸引人。 - 实现动画效果：借助 CSS 的
@keyframes规则定义摩天轮的旋转动画以及轿厢的动态效果（如轻微的弹跳），通过animation属性将这些动画应用到相应的元素上，并且合理设置动画的参数（如时长、速度曲线、循环次数等），让整个摩天轮动起来，呈现出流畅自然的动画效果。 - 增强交互性：添加鼠标悬停等交互效果，当用户将鼠标指针移动到摩天轮上时，摩天轮能够暂停旋转，增加用户与页面之间的互动，提升用户体验。
三、代码实现
3.1 HTML 结构搭建
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯代码实现旋转摩天轮</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ferris-wheel-container">
<div class="ferris-wheel">
<!-- 摩天轮中心轴 -->
<div class="center"></div>
<!-- 连接轿厢的钢缆 -->
<div class="cable cable-1"></div>
<div class="cable cable-2"></div>
<div class="cable cable-3"></div>
<div class="cable cable-4"></div>
<!-- 轿厢及其中的小人 -->
<div class="cabin cabin-1">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-2">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-3">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-4">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
在这段 HTML 代码中，我们构建了一个层次分明的结构。最外层的 ferris-wheel-container 作为整个摩天轮场景的容器，方便对摩天轮进行整体的定位和管理。ferris-wheel 元素代表摩天轮本身，内部包含了表示中心轴的 center 元素，以及四条连接轿厢的钢缆（cable 元素）。每个轿厢（cabin 元素）中又嵌套了一个表示小人的 person 元素，小人进一步细分为头部（head 元素）、身体（body 元素）和腿部（legs 元素及其子元素 leg）。这样的结构设计使得代码的逻辑更加清晰，便于后续在 CSS 中对各个部分进行独立的样式和动画设置。
3.2 CSS 样式设计
/* 全局样式 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #87CEEB 0%, #F0E68C 100%);
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* 摩天轮容器样式 */
.ferris-wheel-container {
position: relative;
width: 450px;
height: 450px;
perspective: 800px; /* 增加透视效果，使摩天轮更具立体感 */
}
/* 摩天轮样式 */
.ferris-wheel {
position: relative;
width: 100%;
height: 100%;
border: 20px solid #333;
border-radius: 50%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
animation: rotate 35s linear infinite;
transform-style: preserve-3d; /* 保持 3D 变换效果 */
}
/* 中心轴样式 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
/* 钢缆样式 */
.cable {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 220px;
background-color: #333;
transform-origin: top center;
z-index: -1; /* 设置钢缆层级低于轿厢，使其在轿厢后面显示 */
}
.cable-1 {
transform: rotate(0deg);
}
.cable-2 {
transform: rotate(90deg);
}
.cable-3 {
transform: rotate(180deg);
}
.cable-4 {
transform: rotate(270deg);
}
/* 轿厢样式 */
.cabin {
position: absolute;
width: 70px;
height: 90px;
background: linear-gradient(to bottom, #FF8C00, #FF4500);
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
transform-origin: center 225px;
animation: cabin-bounce 6s ease-in-out infinite alternate;
display: flex;
justify-content: center;
align-items: center; /* 使轿厢内的小人垂直水平居中 */
}
.cabin-1 {
top: 15px;
left: 50%;
transform: translateX(-50%);
}
.cabin-2 {
top: 50%;
right: 15px;
transform: translateY(-50%);
}
.cabin-3 {
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.cabin-4 {
top: 50%;
left: 15px;
transform: translateY(-50%);
}
/* 小人样式 */
.person {
width: 40px;
height: 60px;
}
.head {
width: 25px;
height: 25px;
background-color: #FFFF00;
border-radius: 50%;
margin-bottom: 5px;
}
.body {
width: 20px;
height: 30px;
background-color: #0099FF;
}
.legs {
display: flex;
justify-content: space-around;
width: 100%;
}
.leg {
width: 5px;
height: 10px;
background-color: #0099FF;
}
/* 摩天轮旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 轿厢弹跳动画 */
@keyframes cabin-bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
/* 鼠标悬停效果 */
.ferris-wheel:hover {
animation-play-state: paused;
}
代码解释
- 全局样式：通过 Flexbox 布局使摩天轮在页面中垂直和水平居中显示。设置了一个从蓝色到黄色的线性渐变背景，模拟天空和地面的过渡效果。
overflow: hidden用于隐藏超出页面范围的内容，避免出现滚动条。font-family设置了默认字体，为页面文本显示提供基础样式。 - 摩天轮容器样式：
ferris-wheel-container元素设置了固定的宽度和高度，并添加了perspective属性，为摩天轮添加透视效果，使其在旋转时更具立体感。position: relative为内部元素的定位提供参考。 - 摩天轮样式：
ferris-wheel元素占据容器的全部空间，设置了较粗的边框、圆角和阴影，增强其立体感和视觉吸引力。animation属性应用了rotate动画，使摩天轮以线性速度无限旋转。transform-style: preserve-3d确保在 3D 空间中进行变换，配合perspective属性实现更好的 3D 效果。 - 中心轴样式：
center元素通过绝对定位位于摩天轮的中心，设置了较大的尺寸、深色背景和阴影，使其更加醒目。 - 钢缆样式：
cable元素通过绝对定位和旋转属性，将四条钢缆分别旋转到 0 度、90 度、180 度和 270 度，连接中心轴和轿厢。z-index: -1将钢缆的层级设置低于轿厢，确保轿厢在钢缆前面显示。 - 轿厢样式：
cabin元素设置了合适的尺寸、渐变背景、阴影和圆角，使其看起来更加美观和真实。transform-origin设置了旋转中心，animation属性应用了cabin-bounce动画，使轿厢在旋转过程中产生轻微的弹跳效果。display: flex配合justify-content: center和align-items: center使轿厢内的小人垂直水平居中。 - 小人样式：对小人的头部、身体和腿部分别设置了不同的尺寸、颜色和样式，使其形象更加生动。
legs元素通过display: flex和justify-content: space-around使两条腿均匀分布在身体下方。 - 动画效果：
rotate动画定义了摩天轮从 0 度旋转到 360 度的过程，cabin-bounce动画定义了轿厢在垂直方向上的弹跳效果，从初始位置到向上移动一定距离再返回。 - 交互效果：当鼠标悬停在摩天轮上时，
animation-play-state: paused使摩天轮的旋转动画暂停，增加用户与页面的互动性。
四、完整代码
HTML 代码（index.html）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯代码实现旋转摩天轮</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ferris-wheel-container">
<div class="ferris-wheel">
<!-- 摩天轮中心轴 -->
<div class="center"></div>
<!-- 连接轿厢的钢缆 -->
<div class="cable cable-1"></div>
<div class="cable cable-2"></div>
<div class="cable cable-3"></div>
<div class="cable cable-4"></div>
<!-- 轿厢及其中的小人 -->
<div class="cabin cabin-1">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-2">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-3">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
<div class="cabin cabin-4">
<div class="person">
<div class="head"></div>
<div class="body"></div>
<div class="legs">
<div class="leg"></div>
<div class="leg"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS 代码（styles.css）
/* 全局样式 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #87CEEB 0%, #F0E68C 100%);
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* 摩天轮容器样式 */
.ferris-wheel-container {
position: relative;
width: 450px;
height: 450px;
perspective: 800px;
}
/* 摩天轮样式 */
.ferris-wheel {
position: relative;
width: 100%;
height: 100%;
border: 20px solid #333;
border-radius: 50%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
animation: rotate 35s linear infinite;
transform-style: preserve-3d;
}
/* 中心轴样式 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
/* 钢缆样式 */
.cable {
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 220px;
background-color: #333;
transform-origin: top center;
z-index: -1;
}
.cable-1 {
transform: rotate(0deg);
}
.cable-2 {
transform: rotate(90deg);
}
.cable-3五、总结
通过本文的介绍，我们利用纯 CSS 代码成功实现了一个旋转的摩天轮，并且每个轿厢中都有可爱的小人。在实现过程中，我们运用了 CSS 的布局、动画、渐变、阴影等多种特性，同时添加了鼠标悬停的交互效果，提升了用户体验。你可以根据自己的喜好对代码进行进一步的修改和扩展，例如增加更多的轿厢、改变颜色和动画速度等，让这个摩天轮更加独特。希望这篇文章能为你的 CSS 学习和网页设计带来新的灵感！
将上述代码分别保存为 index.html 和 styles.css 文件，确保它们在同一目录下，然后在浏览器中打开 index.html 文件，即可看到旋转的摩天轮。
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
