前几天我在浏览Apple.com，想知道如何看电视，但按下“watch”键显然会把你带到其他地方。
就在那时，也只有在那时，我才看到那面旗帜最美丽的一面。我不仅能用苹果卡获得3%的每日现金返还。哦,不。我可以在24个月内免息支付我的新苹果手表。
但最吸引我的是这条横幅。与其他横幅不同的是，它干净、优雅，动画也非常流畅。
所以。我想通过在Webflow Designer中重建一个这样的横幅。我们在这里使用的概念是完全相同的，如果你使用自定义代码或使用可视化开发平台，如Webflow。
所以我们将把它分解成三件事:结构(基本上是横幅的解剖和样式)，然后是互动和动画本身，最后，我们将弄清楚我如何在Apple.com上看电视。
结构。有很多不同的方法可以做到这一点。我们使用的Div比苹果少三个，结构是这样的:
我们会有我们的文本，它会被放在一个文本包装中。然后所有这些都被放在一个横幅里，横幅被包裹在一个横幅包装里。
两个问题:(1)为什么要这样布局?(2)它不是“嵌套”而不是“依偎”吗?
它的神奇之处在于文本受到文本包装器的限制(它使内容变得狭窄)。而横幅本身就是容纳这些东西的地方。但是横幅包装器是充当秘密窗口的。它会在播放动画时把横幅剪下来。
所以。我们来设置一下。我们将按相反的顺序构建这个结构:我们将从parent-most元素开始。让我们添加一个Div(我们将它放在页面的任何地方，但我将把它放在导航栏下)。让我们创建一个类来保持它的组织:我将其称为横幅包装器。这就是开始。
在横幅包装里面，当然，我们将添加另一个Div。为什么?因为这个(我们将再次添加一个类)是我们的横幅。让我们设置背景颜色。记住，我们还没有添加任何维度，我们没有这样做的原因是，很多这将由文本本身决定大小。
好的。横幅内部是我们的文本包装器。哦，看，另一个Div。这是文本包装器(所以我们快完成了-我们要确保在这里添加一个类的名字)。这个是不同的，因为就像我们刚才说的，我们会用它来保持物体整齐地朝向中心。让我们设置一个最大值(苹果是980，你可以做任何你想做的)。让我们把两边的边距设置为自动(这将保持东西居中)。
好的。最后，添加文本。现在，苹果在这里用了一段话。这可能是我们最好的选择，但你真的可以添加任何东西——一张图片、一个链接、一个按钮。我们可以按照我们想要的方式来设置段落的样式。
现在。在我们进入互动之前还有一件事。这看起来不错，但是段落默认会有一些底边距。我们把它变成0。而且，边上的文字也很紧凑。让我们选择我们的文本包装，并添加一些填充，以创建一些呼吸空间的四个边(只需按住shift来调整所有四个边一次)。
此外，因为我们将在这里创建一个动画，我们想要确保横幅是隐藏的(在苹果，注意横幅是如何在动画进入边界之前不可见的)。因此，为了确保我们的设计中有相同的内容，选择横幅包装器，让我们将溢出隐藏起来。(这将在边界外剪辑内容。)
朋友们，就是这样。我们能更进一步吗?当然，我将粘贴新的文本，其中包含比苹果更具竞争力的条款。
好的。交互。这个很简单。我们有一个初始状态(在这个状态中，横幅被隐藏在视图之外)，然后我们有一个完全加载的状态(这样在页面加载后，我们可以滑下横幅进入视图)。
让我们来构建它。让我们确保我们的横幅被选中(而不是包装器)，让我们进入并添加一个交互。我们希望这是一个页面触发器(所以当页面加载时，我们希望一些动画发生)。我们可以在这里定义:我们可以让它开始一个动画，这可以是我们自己创建的一个新动画。我们将其命名为“我们自己创建的新动画”。“但是，不，我们不会的，那是一个可怕的名字。我们把它重命名为"横幅滑进"
好的。总结一下:两点。起点，终点。让我们点击添加一个起点。我们要移动这个，所以我们选择移动。为了演示一下，我们在y轴上上下移动。但我们真正想要做的是确保它是100%的(这是横幅的全部高度)我们想要确保它是100%的，所以我们不能通过横幅包装器看到它。我们把它设为- 100%
和现在。它去哪里来的?它就在视线之外。
为了确保这是它默认做的(事实上，如果我按下播放按钮，当页面加载时，它实际上做的与我们想要的相反)但为了确保这是初始状态(它是在页面加载时折叠起来的，我们将这个动作设为初始状态。
好的。这是第一部分:起点。第二。我们再添加一个动作。(这也是一个移动动作)在这一点，我们想把它归零(换句话说，我们想让它回到原点)。那有什么用呢?让我们来看看。
播放按钮。
我们可以看到，它从起点(初始状态)到原点(我们希望它在的位置)。
现在。我们还可以做点别的。例如，我们可以进入并改变缓动(我们可以控制缓动曲线的类型来决定y位置的速度)，让我们在动画开始之前在这里添加0.2秒的延迟。
我们还可以做的另一件事(如果我们真的想要像苹果那样)是，我们可以在加载后改变颜色。所以让我们再加两点:
第一。让我们改变背景颜色。所以我们将添加另一个动作后，它的动画。这个动作会改变背景颜色。我们将颜色改为灰色(我们可以在这里选择任何颜色)。实际上，我们不希望它立即发生。所以让我们进入并确保这个动作在2秒内开始(我们可以在这里添加延迟)。
我们还可以改变文本的颜色。为此，让我们选择段落。一旦我们这样做了，我们会特别地点击以确保我们添加了一个并发动作。你会注意到它是如何分组的(让我们选择文本颜色)当我们进行分组时这个动画会与背景颜色同时发生。我们把这个颜色改成黑色或者深灰色。
如果我们进入预览模式。会发生什么呢?好吧，我没按按钮。但是当我做到的时候呢?繁荣。的。颜色改变。魔法。
所以。有了这样的东西，我们可以做很多事情。在进行第3步之前，让我们回顾一下我们所做的。
我们添加了四个元素:一个横幅包装器、其中的一个横幅、一个文本包装器以及其中的一些文本。我们用一种叫做css的秘密语言对它做了很多处理。这让我们得到我们想要的布局位置。
然后我们加入了互动。在页面加载时，我们遵循一个定制的动画，动画遵循我们的操作:从初始位置移动到原点。然后改变背景的颜色和其他与“背景”相反的东西。
最后，对于第三步，我将试着弄清楚如何观看Apple TV+——尤其是Ted Lasso在苹果网站上的视频。
苹果电视……这是怎么回事?是Apple.com吗?我,还是……不，等等，我找到了。苹果电视+。好了。好的。流了。好的,现在流。 Open TV. Welcome to TV. Start watching. Alright, Ted Lasso I'm coming for you. Wait. Okay. Start free trial. Apple ID. Okay. Password. I'm in.
[背景播放的是Ted Lasso]
[格里姆]会很不错的。
