前端--移动端之第八天

m0_74242675

已于 2024-02-04 20:35:44 修改

阅读量769

点赞数 26

分类专栏：前端 HTML css js 文章标签：前端 css html5 css3 开发语言

于 2024-02-04 20:25:01 首次发布

本文链接：https://blog.csdn.net/m0_74242675/article/details/136031276

版权

前端 HTML css js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

移动端前端开发主要**针对的是运行在智能手机和平板电脑等移动设备上的Web应用程序和轻量级App**。以下是一些移动端前端开发的关键点：

1. **响应式设计**：这是确保网站能够适配不同屏幕尺寸和分辨率的技术，使得网页能够在各种设备上提供良好的用户体验。
2. **触摸事件处理**：由于移动设备的交互方式以触摸为主，因此移动端前端开发需要对触摸事件（如点击、滑动、缩放）进行优化处理。
3. **性能优化**：考虑到移动设备相较于PC有更受限的硬件资源，性能优化尤为重要。这包括减少HTTP请求、压缩文件、使用缓存策略等。
4. **框架和库的选择**：流行的前端框架如React Native、Flutter、Vue.js等都提供了移动端开发的解决方案，同时还有专门针对移动端的UI组件库和工具，如Ionic、Ant Design Mobile等。
5. **跨平台开发**：使用诸如Cordova或Capacitor这样的工具，可以将Web应用封装成原生应用运行在移动设备上。
6. **安全性考虑**：移动端应用往往涉及到更多的个人数据，因此在开发过程中需要特别关注数据传输的安全性和隐私保护措施。
7. **测试和调试**：移动设备多样化的操作系统和浏览器环境给测试带来了挑战，因此需要采用有效的自动化测试和真机调试手段来确保质量。
8. **搜索引擎优化（SEO）**：即使是移动端，SEO也是推广网站的重要手段之一，合理的SEO策略有助于提升应用在搜索引擎中的排名。
9. **模块化与组件化**：为了提高代码复用性和可维护性，移动端前端开发通常倡导模块化和组件化的开发方式。
10. **持续集成与持续部署（CI/CD）**：随着移动应用发布周期的加快，CI/CD在保证快速迭代的同时还能维持高质量标准方面起到了关键作用。

综上所述，移动端前端开发不仅要考虑传统Web开发的要素，还要兼顾移动设备特有的限制和特性，以确保最终产品能够满足用户的需求并提供优质体验。

01-HTML5新增语义标签(1)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header,
        nav,
        section {
            display: block;
            height: 120px;
            background-color: pink;
            margin: 10px;
        }
    </style>

</head>

<body>
    <header> header</header>
    <header> header</header>
    <nav> nav </nav>
    <section></section>
</body>

</html>

02-多媒体标签音频标签

多媒体标签是HTML中用于嵌入音频、视频等媒体内容的标签。其中，<audio>标签用于在网页中嵌入音频内容。

下面是一个使用<audio>标签的例子：

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

在这个例子中，<audio>标签包含了一个controls属性，它提供了播放、暂停和音量控制等功能。<source>标签用于指定音频文件的路径和类型。如果用户的浏览器不支持<audio>标签，将显示文本“您的浏览器不支持音频播放。”

03-多媒体标签视频标签

多媒体标签是HTML中用于嵌入音频、视频等媒体内容的标签。其中，<video>标签用于在网页中嵌入视频内容。

下面是一个使用<video>标签的例子：

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

在这个例子中，<video>标签包含了一个controls属性，它提供了播放、暂停、音量控制和全屏等功能。<source>标签用于指定视频文件的路径和类型。如果用户的浏览器不支持<video>标签，将显示文本“您的浏览器不支持视频播放。”

04-HTML5新增input表单

HTML5新增了一些input表单类型，例如email、number、date等。下面是一个使用email类型的input表单的例子：

<form>
  <label for="email">邮箱地址：</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="提交">
</form>

在这个例子中，type="email"属性指定了输入框的类型为电子邮件地址。浏览器会自动验证用户输入的内容是否符合电子邮件地址的格式。required属性表示该输入框是必填项，如果用户未填写或填写不正确，将无法提交表单

05-HTML5新增表单属性

HTML5新增了一些表单属性，例如`placeholder`、`autofocus`、`required`等。下面是一个使用`placeholder`属性的例子：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  <input type="submit" value="提交">
</form>

在这个例子中，`placeholder="请输入用户名"`属性用于在输入框中显示提示信息。当用户点击输入框时，提示信息会自动消失，用户可以在输入框中输入内容。

06-CSS3属性选择器

CSS3属性选择器可以根据元素的属性和属性值来选择元素。下面是一个使用CSS3属性选择器的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择带有data-example属性的元素 */
  [data-example] {
    color: blue;
  }
</style>
</head>
<body>

<h1 data-example="example">这是一个带有data-example属性的标题</h1>
<p>这是一个普通的段落</p>

</body>
</html>

在这个例子中，[data-example]表示选择带有data-example属性的元素。因此，<h1>元素被选中，并设置字体颜色为蓝色。

07-CSS3结构伪类选择器

CSS3结构伪类选择器可以根据元素在文档中的位置和关系来选择元素。下面是一个使用CSS3结构伪类选择器的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择第一个子元素 */
  p:first-child {
    color: red;
  }
</style>
</head>
<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

</body>
</html>

在这个例子中，p:first-child表示选择作为其父元素的第一个子元素的<p>元素。因此，第一个<p>元素被选中，并设置字体颜色为红色。

08-nth-child

`nth-child` 是一个 CSS 选择器，用于选择父元素的第 n 个子元素。下面是一个使用 `nth-child` 的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择第二个子元素 */
  p:nth-child(2) {
    color: red;
  }
</style>
</head>
<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>

</body>
</html>

在这个例子中，p:nth-child(2) 表示选择作为其父元素的第二个子元素的 <p> 元素。因此，第二个 <p> 元素被选中，并设置字体颜色为红色。

09-nth-of-type

`nth-of-type` 是一个 CSS 选择器，用于选择指定类型的第 n 个子元素。下面是一个使用 `nth-of-type` 的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择第二个 p 元素 */
  p:nth-of-type(2) {
    color: red;
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<span>这是一个 span 元素。</span>

</body>
</html>

在这个例子中，p:nth-of-type(2) 表示选择作为其父元素的第二个 <p> 元素。因此，第二个 <p> 元素被选中，并设置字体颜色为红色。

10-CSS3伪元素选择器

CSS3伪元素选择器用于选择某些特定元素的特定部分。下面是一个使用CSS3伪元素选择器的例子：


<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择第一个段落的第一个字母 */
  p::first-letter {
    font-size: 24px;
    color: red;
  }
</style>
</head>
<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

</body>
</html>

在这个例子中，p::first-letter 表示选择作为其父元素的第一个子元素的 <p> 元素的第一个字母。因此，第一个段落的第一个字母被选中，并设置字体大小为 24px，字体颜色为红色。

11-伪元素选择器案例

伪元素选择器用于选择某些特定元素的特定部分。下面是一个使用伪元素选择器的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 选择第一个段落的第一个字母 */
  p::first-letter {
    font-size: 24px;
    color: red;
  }
</style>
</head>
<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

</body>
</html>

12-2D转换之位移translate

`translate()` 是 CSS3 中的一种 2D 转换方法，用于在水平和垂直方向上移动元素。下面是一个使用 `translate()` 的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 将 div 元素向右移动 50px，向下移动 100px */
  div {
    transform: translate(50px, 100px);
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

在这个例子中，transform: translate(50px, 100px); 表示将 <div> 元素向右移动 50px，向下移动 100px。因此，<div> 元素的位置发生了变化。

13-让盒子实现水平和垂直居中

要让一个盒子在水平和垂直方向上居中，可以使用 CSS 中的 margin: auto 和 position: absolute 属性。下面是一个使用这些属性的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 将 div 元素设置为绝对定位 */
  div {
    position: absolute;
    /* 设置左右外边距为自动 */
    margin-left: auto;
    margin-right: auto;
    /* 设置上下外边距为自动 */
    top: 0;
    bottom: 0;
    /* 设置宽度和高度 */
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>

<div></div>

</body>
</html>

在这个例子中，position: absolute 表示将 <div> 元素设置为绝对定位，margin-left: auto 和 margin-right: auto 表示将左右外边距设置为自动，top: 0 和 bottom: 0 表示将上下外边距设置为自动。这样，<div> 元素就会在水平和垂直方向上居中显示。

14-2D转换之旋转rotate

rotate() 是 CSS3 中的一种 2D 转换方法，用于旋转元素。下面是一个使用 rotate() 的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 将 div 元素顺时针旋转 45 度 */
  div {
    transform: rotate(45deg);
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

在这个例子中，transform: rotate(45deg); 表示将 <div> 元素顺时针旋转 45 度。因此，<div> 元素的位置发生了变化。

15-CSS3书写三角

CSS3 中可以使用伪元素 `::before` 或 `::after` 来创建一个三角形。下面是一个使用伪元素创建三角形的例子：

<!DOCTYPE html> <!-- 声明文档类型为HTML -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 头部元素，包含元数据和链接 -->
<style> <!-- 定义内部CSS样式 -->
  /* 创建一个向上的三角形 */
  .triangle { <!-- 定义一个名为"triangle"的类 -->
    width: 0; <!-- 设置元素的宽度为0 -->
    height: 0; <!-- 设置元素的高度为0 -->
    border-left: 50px solid transparent; <!-- 设置左边框为50像素宽、透明色 -->
    border-right: 50px solid transparent; <!-- 设置右边框为50像素宽、透明色 -->
    border-bottom: 100px solid red; <!-- 设置下边框为100像素宽、红色 -->
  }
</style> <!-- 结束内部CSS样式的定义 -->
</head> <!-- 结束头部元素 -->
<body> <!-- 主体元素，包含页面内容 -->

<div class="triangle"></div> <!-- 创建一个具有"triangle"类的div元素，用于显示三角形 -->

</body> <!-- 结束主体元素 -->
</html> <!-- 结束HTML文档 -->

在这个例子中，.triangle 类表示一个向上的三角形。通过设置边框的宽度和颜色，可以创建一个三角形。其中，border-left、border-right 和 border-bottom 分别表示三角形的左、右和下边框。

16-设置元素转换中心点

在 CSS3 中，可以使用 transform-origin 属性来设置元素的转换中心点。下面是一个使用 transform-origin 的例子：

<!DOCTYPE html> <!-- 声明文档类型为HTML -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 头部元素，包含元数据和链接 -->
<style> <!-- 定义内部CSS样式 -->
  /* 将 div 元素顺时针旋转 45 度，并将转换中心点设置为左上角 */
  div { <!-- 选择所有的div元素 -->
    transform: rotate(45deg); <!-- 设置元素的旋转角度为45度 -->
    transform-origin: top left; <!-- 设置元素的旋转中心点为左上角 -->
  }
</style> <!-- 结束内部CSS样式的定义 -->
</head> <!-- 结束头部元素 -->
<body> <!-- 主体元素，包含页面内容 -->

<div>这是一个 div 元素。</div> <!-- 创建一个div元素，并应用CSS样式 -->

</body> <!-- 结束主体元素 -->
</html> <!-- 结束HTML文档 -->

在这个例子中，transform: rotate(45deg); 表示将 <div> 元素顺时针旋转 45 度。而 transform-origin: top left; 则表示将转换中心点设置为左上角。因此，<div> 元素的位置发生了变化，并且以左上角为中心点进行旋转。

17-旋转中心点案例

在 CSS3 中，可以使用 `transform-origin` 属性来设置元素的转换中心点。下面是一个使用 `transform-origin` 的例子：


<!DOCTYPE html>
<html>
<head>
<style>
   /* 将 div 元素顺时针旋转 45 度，并将转换中心点设置为左上角 */
  div { <!-- 选择所有的div元素 -->
    transform: rotate(45deg); <!-- 设置元素的旋转角度为45度 -->
    transform-origin: top left; <!-- 设置元素的旋转中心点为左上角 -->
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

18-2D转换之缩放scale

`scale()` 是 CSS3 中的一种 2D 转换方法，用于缩放元素。下面是一个使用 `scale()` 的例子：


<!DOCTYPE html>
<html>
<head>
<style>
  /* 将 div 元素在水平和垂直方向上分别缩小为原来的一半 */
  div {
    transform: scale(0.5, 0.5);
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

在这个例子中，transform: scale(0.5, 0.5); 表示将 <div> 元素在水平和垂直方向上分别缩小为原来的一半。因此，<div> 元素的大小发生了变化。

19-图片放大案例

在 CSS3 中，可以使用 transform 属性的 scale() 方法来放大图片。下面是一个使用 scale() 放大图片的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 将 img 元素在水平和垂直方向上分别放大为原来的两倍 */
  img {
    transform: scale(2, 2);
  }
</style>
</head>
<body>

<img src="example.jpg" alt="示例图片">

</body>
</html>

在这个例子中，transform: scale(2, 2); 表示将 <img> 元素在水平和垂直方向上分别放大为原来的两倍。因此，图片的大小发生了变化。

20-分页按钮案例

在网页中，分页按钮是一种常见的设计元素，用于在不同的页面之间进行切换。下面是一个使用 HTML 和 CSS 实现分页按钮的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 开始设置分页按钮的整体样式 */
  .pagination {
    display: flex; <!-- 使用flex布局，使所有子元素在父容器中居中对齐 -->
    justify-content: center; <!-- 设置水平居中对齐 -->
    margin-top: 20px; <!-- 给分页区域设置上外边距为20像素 -->
  }

  /* 设置每个分页链接按钮的基本样式 */
  .pagination a {
    color: black; <!-- 链接文字颜色设为黑色 -->
    padding: 8px 16px; <!-- 为链接添加内边距，使其具有一定的点击区域 -->
    text-decoration: none; <!-- 去除下划线以增强美观性 -->
    border: 1px solid #ddd; <!-- 为链接添加1像素的灰色实线边框 -->
  }

  /* 设置当前激活（已选中）分页链接的样式 */
  .pagination a.active {
    background-color: #4CAF50; <!-- 背景色设为绿色 -->
    color: white; <!-- 文字颜色设为白色 -->
    border: 1px solid #4CAF50; <!-- 边框颜色与背景色相同，强化激活状态 -->
  }

  /* 设置鼠标悬停在非激活状态分页链接上的样式 */
  .pagination a:hover:not(.active) {
    background-color: #ddd; <!-- 当鼠标悬停时，背景色变为浅灰色 -->
  }
</style>
</head>
<body>

<!-- 创建一个用于显示分页导航的div，并应用之前定义的.pagination样式类 -->
<div class="pagination">
  <!-- 左侧翻页按钮，指向前一页 -->
  <a href="#">&laquo;</a>
  
  <!-- 分页链接，其中带有.active类的是当前激活页面 -->
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  
  <!-- 右侧翻页按钮，指向后一页 -->
  <a href="#">&raquo;</a>
</div>

</body>
</html>

在这个例子中，我们使用了一个名为 .pagination 的 CSS 类来设置分页按钮的样式。我们使用 display: flex 属性将按钮水平排列，并使用 justify-content: center 属性将它们居中对齐。我们还为每个按钮设置了边框、填充和文本装饰等样式。最后，我们使用 .active 类来突出显示当前页面的按钮，并使用 :hover 伪类来改变鼠标悬停时的按钮样式。

21-2D转换综合写法顺序

在 CSS3 中，可以使用 `transform` 属性来对元素进行 2D 转换。下面是一个使用 `transform` 属性进行综合写法顺序的例子：

<!DOCTYPE html> <!-- 声明文档类型为HTML -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 头部元素，包含元数据和链接 -->
<style> <!-- 定义内部CSS样式 -->
  /* 将 div 元素顺时针旋转 45 度，并将转换中心点设置为左上角 */
  div { <!-- 选择所有的div元素 -->
    transform: rotate(45deg) translate(100px, 100px) scale(2, 2); <!-- 设置元素的旋转角度为45度，并平移100像素向右和向下，同时放大2倍 -->
  }
</style> <!-- 结束内部CSS样式的定义 -->
</head> <!-- 结束头部元素 -->
<body> <!-- 主体元素，包含页面内容 -->

<div>这是一个 div 元素。</div> <!-- 创建一个div元素，并应用CSS样式 -->

</body> <!-- 结束主体元素 -->
</html> <!-- 结束HTML文档 -->

在这个例子中，我们使用了 transform 属性的三个方法：rotate()、translate() 和 scale()。首先，我们将 <div> 元素顺时针旋转 45 度；然后，我们将它向右移动 100 像素，向下移动 100 像素；最后，我们将它放大为原来的两倍。这三个方法可以按照任意顺序组合在一起使用，以实现更复杂的效果。

22-CSS3动画基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

23-动画序列

在 CSS3 中，可以使用 @keyframes 规则来定义动画序列。下面是一个使用 @keyframes 规则创建动画序列的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 定义名为 "example" 的关键帧动画，描述元素在不同阶段的样式变化 */
  @keyframes example {
    /* 动画开始时（0%）：元素背景色为红色，左偏移和上偏移均为0像素 */
    0% {background-color: red; left: 0px; top: 0px;}
    
    /* 动画进行到25%时：元素背景色变为黄色，左偏移为200像素，上偏移仍为0像素 */
    25% {background-color: yellow; left: 200px; top: 0px;}

    /* 动画进行到50%时：元素背景色变为蓝色，左偏移保持200像素，上偏移变为200像素 */
    50% {background-color: blue; left: 200px; top: 200px;}

    /* 动画进行到75%时：元素背景色变为绿色，左偏移回到0像素，上偏移保持200像素 */
    75% {background-color: green; left: 0px; top: 200px;}

    /* 动画结束时（100%）：元素恢复初始状态，背景色为红色，左偏移和上偏移均为0像素 */
    100% {background-color: red; left: 0px; top: 0px;}
  }

  /* 应用动画到所有的 div 元素上 */
  div {
    width: 100px;       <!-- 设置div元素的宽度为100像素 -->
    height: 100px;      <!-- 设置div元素的高度为100像素 -->
    position: relative; <!-- 设置定位方式为相对定位，以便进行位置动画 -->
    background-color: red; <!-- 初始背景色设为红色 -->

    /* 将之前定义的动画应用到div元素上 */
    animation-name: example;

    /* 设置动画的持续时间为4秒 */
    animation-duration: 4s;

    /* 设置动画无限循环播放 */
    animation-iteration-count: infinite;
  }
</style>
</head>
<body>

<!-- 创建一个div元素，该元素将应用上述样式并执行动画 -->
<div></div>

</body>
</html>

在这个例子中，我们首先使用 @keyframes 规则定义了一个名为 "example" 的动画序列。该动画序列包含了五个关键帧，分别对应了不同的背景颜色和位置。然后，我们将这个动画序列应用到了一个名为 "div" 的元素上，并设置了动画的持续时间和迭代次数。这样，当页面加载时，"div" 元素就会按照我们定义的动画序列进行动画效果的展示。

24-动画属性

在 CSS3 中，可以使用 animation 属性来控制动画效果。下面是一个使用 animation 属性的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 定义一个名为 "example" 的关键帧动画，描述元素在不同阶段的样式变化 */
  @keyframes example {
    /* 动画开始时（0%）：元素背景色为红色，左偏移和上偏移均为0像素 */
    0% {background-color: red; left: 0px; top: 0px;}
    
    /* 动画进行到25%时：元素背景色变为黄色，左偏移为200像素，上偏移仍为0像素 */
    25% {background-color: yellow; left: 200px; top: 0px;}

    /* 动画进行到50%时：元素背景色变为蓝色，左偏移保持200像素，上偏移变为200像素 */
    50% {background-color: blue; left: 200px; top: 200px;}

    /* 动画进行到75%时：元素背景色变为绿色，左偏移回到0像素，上偏移保持200像素 */
    75% {background-color: green; left: 0px; top: 200px;}

    /* 动画结束时（100%）：元素恢复初始状态，背景色为红色，左偏移和上偏移均为0像素 */
    100% {background-color: red; left: 0px; top: 0px;}
  }

  /* 应用动画效果至所有的 div 元素，并设置相关动画属性 */
  div {
    width: 100px;           <!-- 设置div元素的宽度为100像素 -->
    height: 100px;          <!-- 设置div元素的高度为100像素 -->
    position: relative;     <!-- 设置定位方式为相对定位，以便于进行位置动画 -->

    /* 初始状态下，div元素的背景色设为红色 */
    background-color: red;

    /* 将之前定义的关键帧动画 "example" 应用到此div元素 */
    animation-name: example;

    /* 设置动画的总持续时间为4秒 */
    animation-duration: 4s;

    /* 设置动画无限循环播放 */
    animation-iteration-count: infinite;

    /* 设置动画的速度曲线为匀速直线运动 */
    animation-timing-function: linear;

    /* 设置动画在页面加载后延迟2秒才开始执行 */
    animation-delay: 2s;
  }
</style>
</head>
<body>

<!-- 创建并显示应用了上述动画样式的div元素 -->
<div></div>

</body>
</html>

在这个例子中，我们首先使用 @keyframes 规则定义了一个名为 "example" 的动画序列。然后，我们将这个动画序列应用到了一个名为 "div" 的元素上，并设置了动画的持续时间、迭代次数、时间函数和延迟时间等属性。这样，当页面加载时，"div" 元素就会按照我们定义的动画序列进行动画效果的展示。

25-大数据热点图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- 设置文档字符集为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化视口以适应移动设备 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供对最新版IE浏览器的兼容性支持 -->

    <title>Document</title> <!-- 文档标题 -->

    <style>
        body {
            background-color: #333; <!-- 设置页面背景色为深灰色 -->
        }

        .map { <!-- 定义地图容器样式 -->
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat; <!-- 使用指定图片作为背景，不重复显示 -->
            margin: 0 auto; <!-- 居中显示在容器内 -->
        }
        
        .city { <!-- 定义城市标记容器样式 -->
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff; <!-- 文字颜色设为白色 -->
        }
        
        .tb { <!-- 类名为'tb'的城市标记容器定位调整 -->
            top: 500px;
            right: 80px;
        }
        
        .dotted { <!-- 定义小圆点样式 -->
            width: 8px;
            height: 8px;
            background-color: #09f; <!-- 背景颜色为蓝色 -->
            border-radius: 50%; <!-- 形成圆形 -->
        }
        
        /* 针对.city内部类名以'pulse'开头的div元素进行动画效果设置 */
        .city div[class^="pulse"] {
            /* 使波纹元素水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
            /* 初始尺寸与阴影效果 */
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            
            /* 应用脉冲动画 */
            animation: pulse 1.2s linear infinite;
        }
        
        /* 波纹动画的不同延迟版本 */
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse { <!-- 定义名为'pulse'的关键帧动画 -->
            0% {} <!-- 动画开始状态，保持初始样式 -->
            70% {
                /* 不使用scale属性放大，而是直接改变尺寸 */
                width: 40px;
                height: 40px;
                opacity: 1; <!-- 保持完全透明度 -->
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0; <!-- 最终状态时扩大尺寸并变得完全透明 -->
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <!-- 第一个城市标记，包含一个小圆点和三个不同延时的脉冲动画效果 -->
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        
        <!-- 第二个城市标记，同样包含小圆点和脉冲动画，位置不同于第一个 -->
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

26-速度曲线步长

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- 设置文档字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化视口以适应不同设备宽度 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供对最新版IE浏览器的兼容性支持 -->

    <title>Document</title> <!-- 文档标题 -->

    <style>
        div { <!-- 定义div元素样式 -->
            overflow: hidden; <!-- 隐藏溢出内容 -->
            font-size: 20px; <!-- 设置字体大小为20像素 -->
            width: 0; <!-- 初始宽度设为0 -->
            height: 30px; <!-- 设置高度为30像素 -->
            background-color: pink; <!-- 背景颜色为粉色 -->
            
            /* 强制文本在一行内显示，不换行 */
            white-space: nowrap;
            
            /* 使用steps函数实现动画步进效果，4秒内分10步完成，动画结束后保持最终状态 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w { <!-- 定义名为'w'的关键帧动画 -->
            0% { <!-- 动画开始时 -->
                width: 0; <!-- 宽度从0开始 -->
            }
            100% { <!-- 动画结束时 -->
                width: 200px; <!-- 宽度扩展到200像素 -->
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div> <!-- 文本内容，将在动画中逐字展开 -->
</body>

</html>

27-奔跑的熊大案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- 定义文档的字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化视口以适应不同设备宽度 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供对最新版IE浏览器的兼容性支持 -->

    <title>Document</title> <!-- 设置网页标题 -->

    <style>
        body { <!-- 设置body元素样式 -->
            background-color: #ccc; <!-- 背景颜色为浅灰色 -->
        }
        
        div { <!-- 定义div元素样式 -->
            position: absolute; <!-- 使用绝对定位，让元素脱离常规文档流 -->
            width: 200px; <!-- 元素宽度为200像素 -->
            height: 100px; <!-- 元素高度为100像素 -->
            background: url(media/bear.png) no-repeat; <!-- 使用背景图片，并禁止其平铺显示 -->
            
            /* 为元素添加两个动画效果，用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
            
            /* 动画bear使背景图片在水平方向上循环移动 */
            /* 动画move则负责将元素从左侧移动到屏幕中心位置 */
        }
        
        @keyframes bear { <!-- 定义名为bear的关键帧动画 -->
            0% {
                background-position: 0 0; <!-- 动画开始时背景图片位于左上角 -->
            }
            100% {
                background-position: -1600px 0; <!-- 动画结束时背景图片向左移动了1600像素 -->
                /* 假设图片宽为200px，则步进8次完成一次循环 */
            }
        }
        
        @keyframes move { <!-- 定义名为move的关键帧动画 -->
            0% {
                left: 0; <!-- 动画开始时元素位于父容器左侧 -->
            }
            100% {
                left: 50%; <!-- 动画结束时元素水平居中，相对于父容器左侧移动50% -->
                /* margin-left: -100px; 另一种实现水平居中的方法（未启用） */
                transform: translateX(-50%); <!-- 使用CSS3变换属性translateX将元素自身内容区居中对齐 -->
            }
        }
    </style>
</head>

<body>
    <div></div> <!-- 空div元素，应用上述样式和动画 -->
</body>

</html>

28-3D移动translate3d

3D移动translate3d是一种CSS3的变换属性，用于在三维空间中移动元素。下面是一个使用translate3d的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  <!-- 定义一个名为 .box 的 CSS 类 -->
  .box {
    width: 100px; <!-- 设置盒子的宽度为100像素 -->
    height: 100px; <!-- 设置盒子的高度为100像素 -->
    background-color: red; <!-- 设置盒子背景颜色为红色 -->

    /* 使用3D转换（translate3d）将盒子沿X轴、Y轴和Z轴平移 */
    transform: translate3d(50px, 50px, 50px);
      <!-- 参数含义：
        - 50px：沿X轴（水平方向）向右移动50像素
        - 50px：沿Y轴（垂直方向）向下移动50像素
        - 50px：沿Z轴（深度方向）向远离屏幕方向移动50像素（在CSS3 3D空间中，可能需要配合透视效果才能明显看到此变化）
      -->
  }
</style>
</head>
<body>

<!-- 应用 .box 样式类到此 div 元素 -->
<div class="box"></div>

</body>
</html>

在这个例子中，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度和背景颜色。然后，我们使用 transform 属性和 translate3d 函数将元素在三维空间中移动了50像素。这样，元素就会在页面上显示为一个红色的方块，并且向右、向下、向屏幕内部移动了50像素。

29-translateZ

translateZ是一种CSS3的变换属性，用于在三维空间中沿着Z轴移动元素。下面是一个使用translateZ的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  <!-- 定义一个名为 ".box" 的CSS类 -->
  .box {
    width: 100px; <!-- 设置盒模型的宽度为100像素 -->
    height: 100px; <!-- 设置盒模型的高度为100像素 -->
    background-color: red; <!-- 设置背景颜色为红色 -->

    /* 使用3D转换（translateZ）将盒子沿Z轴（深度方向）移动 */
    transform: translateZ(50px);
      <!-- 参数含义：
        - 50px：沿Z轴向远离屏幕的方向移动50像素。
          注意：在没有设置透视（perspective）属性的情况下，单纯使用translateZ可能不会产生明显的视觉效果，
          因为浏览器默认视图是2D平面。为了看到三维空间中的Z轴位移变化，通常需要配合父元素或视口设置透视效果。
      -->
  }
</style>
</head>
<body>

<!-- 应用 ".box" 样式类到此 div 元素 -->
<div class="box"></div>

</body>
</html>

在这个例子中，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度和背景颜色。然后，我们使用 transform 属性和 translateZ 函数将元素在三维空间中沿着Z轴移动了50像素。这样，元素就会在页面上显示为一个红色的方块，并且向屏幕内部移动了50像素。

30-rotateX

rotateX是一种CSS3的变换属性，用于在三维空间中沿着X轴旋转元素。下面是一个使用rotateX的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  <!-- 定义一个名为 ".box" 的CSS类 -->
  .box {
    width: 100px; <!-- 设置盒模型的宽度为100像素 -->
    height: 100px; <!-- 设置盒模型的高度为100像素 -->
    background-color: red; <!-- 设置背景颜色为红色 -->

    /* 使用3D转换（rotateX）将盒子沿X轴进行旋转 */
    transform: rotateX(45deg);
      <!-- 参数含义：
        - rotateX(45deg)：表示该元素在三维空间中绕其自身的X轴旋转45度。
          注意：由于浏览器默认视图是2D平面，为了看到明显的三维旋转效果，
          通常需要结合父元素或视口设置透视（perspective）属性。
      -->
  }
</style>
</head>
<body>

<!-- 应用 ".box" 样式类到此 div 元素 -->
<div class="box"></div>

</body>
</html>

在这个例子中，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度和背景颜色。然后，我们使用 transform 属性和 rotateX 函数将元素在三维空间中沿着X轴旋转了45度。这样，元素就会在页面上显示为一个红色的方块，并且沿着X轴旋转了45度。

31-rotateY

rotateY是一种CSS3的变换属性，用于在三维空间中沿着Y轴旋转元素。下面是一个使用rotateY的例子：

<!DOCTYPE html> <!-- 声明文档类型为HTML -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 头部元素，包含元数据和链接 -->
<style> <!-- 定义内部CSS样式 -->
  .box { <!-- 选择所有具有class="box"的元素 -->
    width: 100px; <!-- 设置元素的宽度为100像素 -->
    height: 100px; <!-- 设置元素的高度为100像素 -->
    background-color: red; <!-- 设置元素的背景颜色为红色 -->
    transform: rotateY(45deg); <!-- 将元素沿Y轴旋转45度 -->
  }
</style> <!-- 结束内部CSS样式的定义 -->
</head> <!-- 结束头部元素 -->
<body> <!-- 主体元素，包含页面内容 -->

<div class="box"></div> <!-- 创建一个div元素，并应用class="box"，从而应用上述CSS样式 -->

</body> <!-- 结束主体元素 -->
</html> <!-- 结束HTML文档 -->

在这个例子中，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度和背景颜色。然后，我们使用 transform 属性和 rotateY 函数将元素在三维空间中沿着Y轴旋转了45度。这样，元素就会在页面上显示为一个红色的方块，并且沿着Y轴旋转了45度。

32-rotateZ

rotateZ是一种CSS3的变换属性，用于在三维空间中沿着Z轴旋转元素。下面是一个使用rotateZ的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  <!-- 定义一个名为 ".box" 的CSS类 -->
  .box {
    width: 100px; <!-- 设置盒模型的宽度为100像素 -->
    height: 100px; <!-- 设置盒模型的高度为100像素 -->
    background-color: red; <!-- 设置背景颜色为红色 -->

    /* 使用3D转换（rotateZ）将盒子沿Z轴进行旋转 */
    transform: rotateZ(45deg);
      <!-- 参数含义：
        - rotateZ(45deg)：表示该元素在三维空间中绕其自身的Z轴旋转45度。
          注意：虽然在二维屏幕上无法直观地看到Z轴方向的旋转，
          但浏览器会根据该属性对元素进行三维变换。若要观察明显的三维旋转效果，
          可以给包含该元素的父容器或视口添加透视（perspective）属性，以便模拟立体空间中的视觉效果。
      -->
  }
</style>
</head>
<body>

<!-- 应用 ".box" 样式类到此 div 元素 -->
<div class="box"></div>

</body>
</html>

在这个例子中，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度和背景颜色。然后，我们使用 transform 属性和 rotateZ 函数将元素在三维空间中沿着Z轴旋转了45度。这样，元素就会在页面上显示为一个红色的方块，并且沿着Z轴旋转了45度。

33-3D呈现transform-style

transform-style是一种CSS3的属性，用于指定元素的变换方式。当设置为 "preserve-3d" 时，元素将以三维空间的方式进行变换。下面是一个使用transform-style的例子：

<!DOCTYPE html>
<html>
<head>
<style>
  <!-- 定义一个名为 ".container" 的CSS类，用于设置3D变换的容器 -->
  .container {
    perspective: 1000px; <!-- 设置透视距离为1000像素，以模拟三维空间效果 -->
    width: 200px; <!-- 设置容器宽度为200像素 -->
    height: 200px; <!-- 设置容器高度为200像素 -->
  }

  <!-- 定义一个名为 ".box" 的CSS类，用于设置3D旋转的方块 -->
  .box {
    width: 100px; <!-- 设置方块宽度为100像素 -->
    height: 100px; <!-- 设置方块高度为100像素 -->
    background-color: red; <!-- 设置方块背景颜色为红色 -->

    /* 使用3D转换（rotateX）将盒子沿X轴进行45度旋转 */
    transform: rotateX(45deg);

    /* 设置transform-style属性为preserve-3d，允许子元素在3D空间中正确地进行堆叠和旋转 */
    transform-style: preserve-3d;
  }
</style>
</head>
<body>

<!-- 创建一个应用了 ".container" 类的 div 元素作为3D变换的容器 -->
<div class="container">

  <!-- 在容器内创建一个应用了 ".box" 类的 div 元素，并对其进行3D旋转 -->
  <div class="box"></div>

</div>

</body>
</html>

在这个例子中，我们创建了一个名为 "container" 的 div 元素，并设置了宽度、高度和透视距离。然后，我们创建了一个名为 "box" 的 div 元素，并设置了宽度、高度、背景颜色和旋转角度。最后，我们使用 transform-style 属性将元素的变换方式设置为 "preserve-3d"，这样元素就会以三维空间的方式进行变换。

34-两面翻转的盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- 设置文档字符集为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 优化视口以适应各种设备屏幕 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供对最新版IE浏览器的兼容性支持 -->

    <title>Document</title> <!-- 设置页面标题 -->

    <style>
        body {
            perspective: 400px; <!-- 为整个页面设置3D透视效果，距离为400像素 -->
        }

        .box { <!-- 定义一个具有立体翻转效果的盒子类 -->
            position: relative; <!-- 设置相对定位，以便子元素绝对定位 -->
            width: 300px; <!-- 盒子宽度为300像素 -->
            height: 300px; <!-- 盒子高度为300像素 -->
            margin: 100px auto; <!-- 盒子居中显示，并上下外边距为100像素 -->
            transition: all .4s; <!-- 添加过渡效果，所有属性在0.4秒内平滑变化 -->
            
            /* 保留盒子内部子元素的3D空间 */
            transform-style: preserve-3d;
        }
        
        .box:hover { <!-- 当鼠标悬停在.box元素上时 -->
            transform: rotateY(180deg); <!-- 绕Y轴旋转180度，实现前后面翻转效果 -->
        }
        
        .front, .back { <!-- 定义盒子的前面和后面两个部分 -->
            position: absolute; <!-- 使用绝对定位，让前后两部分脱离正常文档流 -->
            top: 0; left: 0; <!-- 将它们放置在父容器顶部左边缘 -->
            width: 100%; height: 100%; <!-- 宽高都充满父容器 -->
            border-radius: 50%; <!-- 形成圆角矩形，即圆形 -->
            font-size: 30px; <!-- 文字大小为30像素 -->
            color: #fff; <!-- 文字颜色为白色 -->
            text-align: center; <!-- 文字居中显示 -->
            line-height: 300px; <!-- 行高与盒子高度相同，使文字垂直居中 -->
        }
        
        .front { <!-- 定义盒子的前面部分样式 -->
            background-color: pink; <!-- 背景颜色为粉色 -->
            z-index: 1; <!-- 设置z-index值大于后部，保证其位于最上层 -->
        }
        
        .back { <!-- 定义盒子的背面部分样式 -->
            background-color: purple; <!-- 背景颜色为紫色 -->
            /* 让背面相对于前面进行180度Y轴旋转，模拟类似手机翻转的效果 */
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box"> <!-- 创建一个应用了".box"样式的容器 -->
        <div class="front">程序员</div> <!-- 创建并显示盒子前面的文字内容 -->
        <div class="back">老师这里等你</div> <!-- 创建并显示盒子背面的文字内容 -->
    </div>
</body>

</html>

35-3D导航栏案例

<!DOCTYPE html>
<html>
<head>
<style>
  /* 设置整个页面的样式，消除默认边距和填充 */
  body {
    margin: 0;
    padding: 0;
    /* 添加3D透视效果，距离为1000像素，使得导航栏翻转时有立体感 */
    perspective: 1000px;
  }

  /* 定义固定顶部导航栏样式 */
  .navbar {
    position: fixed; /* 将导航栏固定在浏览器窗口顶部 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度充满整个屏幕 */
    height: 60px; /* 高度设为60像素 */
    background-color: #333; /* 背景颜色为深灰色 */
    
    /* 保留子元素的3D变换空间，以便进行3D翻转 */
    transform-style: preserve-3d;
    
    /* 添加过渡动画效果，所有属性在0.5秒内平滑变化 */
    transition: all 0.5s ease;
  }

  /* 当鼠标悬停在导航栏上时触发的样式 */
  .navbar:hover {
    /* 绕X轴旋转45度，实现翻转效果 */
    transform: rotateX(45deg);
  }

  /* 定义导航栏中的各个链接项样式 */
  .nav-item {
    display: inline-block; /* 以行内块级元素显示，使链接项水平排列 */
    padding: 20px; /* 为链接项添加内边距，使其具有一定的点击区域 */
    color: white; /* 文本颜色设为白色 */
    text-decoration: none; /* 取消下划线，保持文本简洁 */
  }
</style>
</head>
<body>

<!-- 导航栏容器 -->
<div class="navbar">
  <!-- 导航栏内的链接项 -->
  <a href="#" class="nav-item">Home</a>
  <a href="#" class="nav-item">About</a>
  <a href="#" class="nav-item">Services</a>
  <a href="#" class="nav-item">Contact</a>
</div>

</body>
</html>

写作不易，请支持支持，你的点赞是我写的动力

最后求点赞，求分享，求抱抱...