后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使用 HTML、CSS 和 JavaScript 制作引人入胜的演示文稿
内置主题
更改主题
自定义主题
元素
过渡
片段
制作精美的演示文稿并非易事。通常，你只能使用 Keynote 或 PowerPoint，而且模板极其有限且千篇一律。现在，情况已经不同了。
今天，我们将学习如何使用 HTML、CSS 和 JavaScript 创建令人惊叹的动画演示文稿。
如果你是 Web 开发新手，别担心！本教程非常简单易懂，很容易上手。那就让我们开始吧！
我们将使用一个很棒的框架，名为Reveal.js。它提供了强大的功能，可用于创建有趣且可自定义的演示文稿。
- 前往Reveal.js存储库并克隆项目（您也可以将其分叉到您的 GitHub 命名空间）。
- 切换到新克隆的文件夹，运行 npm install 下载依赖包。然后运行
npm start即可运行项目。
该index.html文件包含幻灯片的所有标记。这是使用 Reveal.js 的缺点之一；所有内容都将放在这个 HTML 文件中。
内置主题
Reveal 包含 11 个内置主题供您选择：
更改主题
- 打开
index.html - 更改 CSS 导入以反映您想要使用的主题
主题文件是：
beige.cssblack.cssblood.cssleague.cssmoon.cssnight.cssserif.csssimple.csssky.csssolarized.csswhite.css
自定义主题
创建自定义主题非常简单。今天，我将使用我之前做的一个演示“如何打造超棒的网站：前端开发入门”中的自定义主题。
我的自定义幻灯片如下所示：
创建自定义主题
css/theme/src在 IDE 中打开。它包含.scss每个主题的所有 Sass 文件 ( )。这些文件将使用 Grunt（一个 JavaScript 任务运行器）转换为 CSS。如果您更喜欢编写 CSS，请直接在 css/theme 中创建 CSS 文件。- 创建一个新
.scss文件。我将命名为custom.scss。你可能需要停止本地主机并运行npm run build以将 Sass 代码转换为 CSS。 - 在文件中
index.html，将标签中的 CSS 主题导入更改<head>为使用新创建的样式表的名称。扩展名应为.css，而不是.scss。 - 接下来，我为所有想要使用的不同样式创建了变量。你可以在 Google Fonts 上找到自定义字体。下载字体后，请务必将字体 URL 添加到
index.html文件中。
以下是我选择使用的变量：
- 标题字体：Viga
- 内容字体：Open Sans
- 代码字体：Courier New
- 草书字体：Great Vibes
- 黄色：
#F9DC24
.reveal在自定义 Sass 文件中添加一个 类。这将封装所有样式，以确保我们的自定义主题覆盖所有默认样式。然后，添加您的自定义样式！
!important不幸的是，由于时间限制，我承认我在 CSS 中使用了不少 覆盖。这种做法很糟糕，我不推荐。这个reveal.css文件包含非常具体的 CSS 样式，所以如果时间允许的话，我应该回去确保我的类名更加具体，这样就可以删除 !importants.
混合与设置
Reveal.js 还附带您可以在自定义主题中利用的混合和设置。
要使用混合和设置，只需将文件导入到您的自定义主题中：
@import "../template/mixins";
@import "../template/settings";
混合
您可以使用垂直渐变、水平渐变或径向渐变混合来创建整洁的视觉效果。
您所要做的就是传递所需的参数（颜色值），瞧，您就得到了渐变！
设置
在设置文件中，您会找到有用的变量，如标题大小、默认字体和颜色等等！
元素
添加新内容的结构是：
> .slides > section
该<section>元素代表一张幻灯片。请根据需要添加所需数量的部分来容纳您的内容。
垂直滑梯
要创建垂直幻灯片，只需嵌套部分即可。
过渡
有几种不同的幻灯片切换效果可供您选择：
- 没有任何
- 褪色
- 滑动
- 凸
- 凹
- 飞涨
要使用它们，请将 添加到包含幻灯片数据的data-transition="{name}"中。<section>
片段
片段非常适合突出显示幻灯片上的特定信息。以下是示例。
class="fragment {type-of-fragment}"要使用片段，请向元素添加。
片段的类型可以是：
- 生长
- 收缩
- 淡出
- 淡入淡出
- 淡入淡出
- 淡入半淡出
- 突出显示当前蓝色
- 突出显示红色
- 突出显示绿色
- 突出显示蓝色
您还可以为元素添加索引，以指示它们应按什么顺序突出显示或显示。您可以使用data-fragment-index={index}属性来指示这一点。
reveal.js 还有更多功能可供您利用，以构建精美的演示文稿，但这些是让我开始使用的主要内容。
要了解更多关于如何设置幻灯片格式的信息，请查看reveal.js 教程。
我的演示文稿的所有代码都可以在 GitHub 上查看。欢迎随意使用我的主题！