(欢快的音乐) 欢迎回到KnowledgeCity的课程 在层叠样式表上。 我是Cliff Brozo，我是你的老师。 今天，我们将研究格式化多维数据集计时器。 在上一课中 我们有一个可以跟踪的计时器 每个玩家花费多少时间 回答每个线索。 另外，我们想要一个计时器 那整个过程 让用户知道 他们在整个游戏上花费了多少时间。 我们的游戏计时器将以立方体的形式 它会记录分钟 秒甚至几小时 用户完成游戏所需的时间。 立方体将旋转 这样，如果我们将鼠标悬停在它上面， 它会旋转，看起来很漂亮。 我们将了解我们需要三张脸的事实， 一小时，一分钟 一秒。 当立方体坐下并计数时， 它也会改变颜色。 让我们看一下代码。 在查看我们的Atom开发平台时， 我们注意到从第22行开始， 并继续执行第27行， 我们有一个名为item2的SPAN， 这将放置网格计时器 在网格的第二项中。 让我们看一下它的外观。 这将是item1的类。 这是item2的类。 如您所见，该图具有三个不同的类 因为每个项目都是单独格式化的。 因此，我们有一个顶部，可以跟踪秒数。 右侧，可记录分钟 和左侧，可以跟踪时间。 这些项目的ID为秒，分钟和小时。 我也想引起你的注意 到这里这行34号 其值为hms，小时，分钟，秒 和一类隐藏 我想告诉你删除该类时会发生什么。 并重新启动游戏。 (音乐生动) 这是我的一种方式 在游戏板上放置电话区域 用户看不到的。 它所做的就是获取输入 从多维数据集计时器并将其放置 进入表单字段 这样当用户提交游戏时， 我会确切知道他们花了多长时间 完成游戏。 现在，我不需要显示 这就是为什么我要上一本《 Hideme》的原因 我将其放回第34行， 隐藏该特定区域。 因此用户看不到它在那里。 我们将在短短一秒钟内看到该物品的隐藏方式。 这就是我们要研究的HTML。 让我们看一下CSS。 从第45行开始， 我们有hideme班， 将不透明度设置为零， 在这里有效地渲染项目 数小时，数分钟和数秒不可见。 我整个董事会都有一个字体。 同样，我使用的是Jeopardy字体 以及粗体和常规的权重和样式。 该图处理了实际的立方体 以及立方体的每个部分是如何组成的 这就是我们要看的。 50像素的宽度控制每侧的每个宽度 的多维数据集。 与高度相同。 所以这些数字中的每个数字 零，一个，51、52实际上是一个正方形 组成了立方体的三个部分。 我们永远看不到后面 实际上，背面实际上并不存在。 那是一个立方体的错觉 由于这些旋转的方式。 我把这个放在相对位置 以便将其放置在该网格位置内。 我设定了15％的保证金 只是给自己一些靠墙的空间。 我将原始颜色设置为DodgerBlue， 但是，情况将会改变。 如您所见，颜色在旋转。 他们从黄色变成绿色再变成蓝色 我们将在一分钟内看到这种情况。 很难看到五个像素的文字阴影 但是真的有一个 如果看到数字， 当数字变浅时，它通常可见 有点发光。 发光来自文本阴影。 我的动画需要10秒才能完成 但是它是无限的，所以它不断地在继续。 一会儿我们将看到。 45像素的行高将使数字居中 面对立方体。 而不是将其放在底部 立方体或顶部 它把它放在中间。 为了使这个立方体动画 以三维的方式 我需要保留3D设置 我正在做的是旋转x和y轴。 当我悬停时，我将它们旋转得更多。 所以现在，立方体旋转了 在水平轴上35度 y轴上为45度 这就是为什么它给你错觉 或朝我们倾斜。 当我将鼠标悬停在立方体上时 旋转改变，立方体向我旋转。 我可以玩这些号码 并让它旋转尽可能多的角度。 我将过渡时间设置为两秒 进行旋转。 所以当我将鼠标悬停在立方体上时 完成向前旋转需要两秒钟 和两秒钟完成向后旋转。 那就是悬停数字出现的地方。
