(明亮的音乐) 欢迎回到知识城的课程 在层叠样式表上。 我是Cliff Brozo。 在本课程中，我们将看一看 称为启动画面的东西。 现在您可能会看到第四课的其余部分是空白的。 我们将稍作讨论， 但让我们看一下创造的过程 启动画面。 在查看亚当和我们的开发平台时， 我们有一个基本的HTML文档 具有一般信息的顶部 到一个splash.css文件，我们有两个包装器， 一种叫做容器，一种叫做内容， 那两个将处理方式 文本出现在屏幕上。 如你看到的， 我们所有的文本都设置为H2标题，大小为2， 对于这些项目中的每一项，我都申请了一个课程， 一个单独的，嗯，我称它们为规则 有关此文本每一行的显示方式， 基本上，我们这里的说明是 有关如何玩游戏的信息。 我们需要给用户一些知识 让他们知道该怎么办。 所以我有11条不同的规则。 好吧，最后一个不完全是规则。 最后一个实际上指向游戏的开始， 每个规则解释了不同的部分 游戏的玩法 让我们看一下CSS 我们将专注于 所有不同的规则编号。 在我们的CSS中，从第10行开始， 您可以看到我有我的容器， 它放置一个固定的位置并设置一切 因此它位于左上角。 我正在使用屏幕宽度和高度的100％， 这个容器一直在后台运行 我在这里正在做的是 无线电渐变背景 再一次，这允许我 而不是只有一种颜色， 我要一点颜色 从中间到边缘 然后您会看到它的外观， 因此，不是纯蓝色的背景， 我们会得到柔软的白色中间 并向外生长并在向外延伸时变得模糊。 内容部分具有相同的内容 除了Z索引会发生变化， 然后我将其设置为一个很高的数字， 1,000就足够了 并确保所显示的内容 将要放在容器中任何东西之上 这是背景。 我对H2的规定从第30行开始 然后设置一般字体大小 到视图宽度的五倍， 并且我想确保它填满整个屏幕。 我将文本居中。 我将任何东西都转换为大写。 我使颜色透明 然后创建一个动画，称为模糊淡入和淡出。 该动画将持续三秒钟， 每个H2都有 这些属性附加到它们， 这就是为什么我为此创建了特殊的容器的原因。 然后我开始分别设置每个规则 我为每个规则创建了不同的字体大小， 以及字体大小不同的原因， 我从这里的七个开始，下降到五个， 这取决于我要显示多少文字。 较短的规则将使用较大的字体， 以及规则中更多的单词 会有点小字体 确保它们适合屏幕。 这里的关键是动画延迟， 以及我要完成的工作 设置了几秒钟 这些东西什么时候应该出现。 所以一开始， 发生的是规则一从零秒开始。 没有动画延迟。 当这开始时，实际上会出现第一个规则。 该规则说这是知识城。 那是第一条规则。 这样它将立即显示在屏幕上。 然后它将在那里停留五秒钟 因为第二条规则有五秒钟的延迟 以便用户有机会阅读规则。 现在，每个动画延迟 将有不同的秒数等待 以便用户有时间阅读规则， 以及规则中更多的单词， 动画越长， 通常10秒就足够了 如您所见，其中很多是10秒 规则三是九。 当我们在第79行找到第9条规则时， 那是15秒，那是很多文字， 我们想给用户一个机会 阅读其中的所有文本。 事实证明，第九条规则 直到十分钟才出现 进入此屏幕的开头 您会看到延迟为70秒。 因此，这是一种逐屏编码所有规则的方法， 但是只使用CSS的一个屏幕。
