HTML/CSS 入门第一弹：手把手制作会动的卡通小猫（附代码复制即用）

最新推荐文章于 2025-05-01 23:03:21 发布

谷雪_658

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量1.6k

点赞数 41

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_76277481/article/details/147621232

版权

对于刚接触 Web 开发的新手来说，HTML 和 CSS 是入门的基石。通过它们，我们不仅能搭建出网页的基本结构，还能赋予网页丰富的样式和动态效果。本文将以制作一只会动的卡通小猫为例，带领大家从零开始，逐步掌握 HTML 和 CSS 的基础应用，让大家在实践中感受 Web 开发的乐趣。

一、项目准备：了解基本概念与工具

在开始制作之前，我们先来了解一些必要的基础知识和所需工具。

HTML（超文本标记语言）：它是网页的骨架，用于定义网页的结构和内容，比如标题、段落、图片、链接等。
CSS（层叠样式表）：主要用于美化网页，为 HTML 元素添加样式，如设置颜色、字体、布局，以及实现动画效果等。
开发工具：你可以使用任意一款文本编辑器，如 Visual Studio Code、Sublime Text、Notepad++ 等。这些编辑器都提供了语法高亮、代码提示等功能，能提高开发效率。如果是初学者，推荐使用 Visual Studio Code，它功能强大且插件丰富，能满足各种开发需求。

二、HTML 搭建小猫的基本结构

首先，我们使用 HTML 来构建卡通小猫的基本结构。HTML 通过各种标签来组织内容，每个标签都有其特定的用途。以下是实现小猫结构的 HTML 代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>会动的卡通小猫</title>
</head>

<body>
  <div class="cat-container">
    <!-- 小猫头部 -->
    <div class="cat-head">
      <div class="cat-ear left-ear"></div>
      <div class="cat-ear right-ear"></div>
      <div class="cat-eye left-eye">
        <div class="cat-pupil left-pupil"></div>
      </div>
      <div class="cat-eye right-eye">
        <div class="cat-pupil right-pupil"></div>
      </div>
      <div class="cat-nose"></div>
      <div class="cat-mouth"></div>
    </div>
    <!-- 小猫身体 -->
    <div class="cat-body">
      <div class="cat-front-left-leg"></div>
      <div class="cat-front-right-leg"></div>
      <div class="cat-back-left-leg"></div>
      <div class="cat-back-right-leg"></div>
      <div class="cat-tail"></div>
    </div>
  </div>
</body>

</html>

在这段代码中：

<!DOCTYPE html> 声明了这是一个 HTML5 文档。
<html> 标签是整个 HTML 文档的根元素。
<head> 部分包含了文档的元信息，如字符编码<meta charset="UTF-8">、响应式设置<meta name="viewport" content="width=device-width, initial-scale=1.0">，以及引入外部的 CSS 样式表<link rel="stylesheet" href="styles.css">，同时还设置了网页的标题<title>会动的卡通小猫</title>。
<body> 部分是网页的主体内容，我们通过一系列的<div>标签来构建小猫的各个部分。例如，.cat-container 是小猫整体的容器，.cat-head 和 .cat-body 分别表示小猫的头部和身体，在头部和身体内部又细分了耳朵、眼睛、鼻子、嘴巴、腿和尾巴等元素，并通过添加不同的类名来方便后续在 CSS 中进行样式设置。

三、CSS 赋予小猫样式与动态效果

接下来，我们使用 CSS 为小猫添加样式，并实现动画效果。创建一个名为 styles.css 的文件，与 HTML 文件放在同一目录下，然后将以下 CSS 代码添加到该文件中：

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.cat-container {
  width: 300px;
  height: 300px;
  position: relative;
}

/* 小猫头部样式 */
.cat-head {
  width: 150px;
  height: 150px;
  background-color: #fdd835;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 75px;
  z-index: 1;
}

.cat-ear {
  width: 40px;
  height: 60px;
  background-color: #fdd835;
  position: absolute;
  top: -20px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.left-ear {
  left: 30px;
  transform: rotate(-15deg);
}

.right-ear {
  right: 30px;
  transform: rotate(15deg);
}

.cat-eye {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}

.left-eye {
  left: 40px;
}

.right-eye {
  right: 40px;
}

.cat-pupil {
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cat-nose {
  width: 20px;
  height: 20px;
  background-color: #ff6f00;
  border-radius: 50%;
  position: absolute;
  top: 90px;
  left: 65px;
}

.cat-mouth {
  width: 60px;
  height: 30px;
  position: absolute;
  top: 100px;
  left: 45px;
  border-bottom: 5px solid #ff6f00;
  border-radius: 0 0 30px 30px;
}

/* 小猫身体样式 */
.cat-body {
  width: 200px;
  height: 150px;
  background-color: #fdd835;
  border-radius: 50% 50% 0 0;
  position: absolute;
  top: 120px;
  left: 50px;
}

.cat-front-left-leg,
.cat-front-right-leg,
.cat-back-left-leg,
.cat-back-right-leg {
  width: 30px;
  height: 60px;
  background-color: #fdd835;
  position: absolute;
  border-radius: 50%;
}

.cat-front-left-leg {
  top: 160px;
  left: 40px;
}

.cat-front-right-leg {
  top: 160px;
  right: 40px;
}

.cat-back-left-leg {
  top: 190px;
  left: 50px;
}

.cat-back-right-leg {
  top: 190px;
  right: 50px;
}

.cat-tail {
  width: 80px;
  height: 20px;
  background-color: #fdd835;
  position: absolute;
  top: 140px;
  right: 0;
  border-radius: 20px 0 0 20px;
  animation: wagTail 2s infinite alternate;
}

/* 尾巴动画 */
@keyframes wagTail {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(45deg);
  }
}

在上述 CSS 代码中：

首先进行了全局样式重置，通过 * 选择器将所有元素的 margin 和 padding 设置为 0，并将 box-sizing 设置为 border-box，这样在设置元素大小时会更加方便，避免因边框和内边距影响布局。
对 body 元素进行样式设置，将背景颜色设为 #f4f4f4，使用 Flex 布局使其内容水平和垂直居中，同时设置最小高度为视口高度（100vh），让小猫始终显示在页面中间。
然后分别对小猫的各个部分，如头部、耳朵、眼睛、鼻子、嘴巴、身体、腿和尾巴，通过类选择器设置了具体的尺寸、颜色、位置和形状等样式。例如，.cat-head 设置了圆形的头部形状和颜色，.cat-ear 定义了耳朵的样式，并通过 transform 属性设置了耳朵的旋转角度，使其看起来更生动。
最后，为小猫的尾巴添加了动画效果。通过 @keyframes 规则定义了名为 wagTail 的动画，该动画让尾巴在 0 度到 45 度之间旋转，animation 属性将这个动画应用到 .cat-tail 上，设置动画时长为 2 秒，无限循环播放，并且每次切换方向（alternate），从而实现尾巴摆动的效果。