当你在创建2D和3D转换，或自定义动画状态转换时，这里面有很多东西。这节课很快就会开始了。我们将涵盖不透明度，游标，阴影，状态之间的转换，过滤器，当然，还有2D和3D空间中的不同类型的转换。
不透明度。它让东西变得半透明。如果有重叠的元素呢?降低它们的不透明度会降低它们的不透明度。低透明度意味着你可以看到更多元素背后的东西。
不透明度。游标呢?
[格里姆]有时我是一个骂人的人，但我会忍住，所以我听起来不像一个a -
[McGuire]确定任何元素的默认游标行为可以通过进入Preview来完成。(这里我们可以测试默认的自动游标行为。)当我们悬停在一个链接上时?我们得到了指针。悬停在text上时，会得到text这个东西。
但如果我们想要推翻这种自动行为呢?选择任何元素后，我们可以转到光标下拉菜单，选择其他元素。当我们进入预览模式时?我们可以把光标移到那个元素上，当它进入元素边界时，它就在那里了。新游标。
现在。有一种光标你应该尽量避免使用。当然，我们指的是None游标，它看起来像这样。一个更好的例子是选择Body元素。我们将在光标下拉菜单中设置光标。我们将把它…没有一个。现在?当有人将鼠标移动到页面内的任何地方时?
[Grímur]啊，我都看不到我的鼠标了。这是公牛,
[McGuire]阴影几乎可以应用于任何东西，所以让我们从光标转移到盒子阴影。这些可以增加视觉上的提升和对比元素…不管你背后有什么背景。
盒子阴影作用于元素本身(盒子;它的边界)。如果你有一个标题然后应用一个框影?也许这…视觉风格……是你的事，没有评判。但是请注意阴影是如何应用于方框本身而不是每个字母的。(这就是文本阴影的作用。)
但是像按钮或卡片这样的东西呢?我们可以像这样给任何东西添加一个盒子阴影…但是请注意我们如何切换一个内阴影…在边界)。让我们换回来。
我们可以调整所有的属性，直到我们得到我们想要的影子。需要记住的是:把你的阴影设置成灰色可能很诱人(尤其是在较浅的背景色上)。但是如果你的目标是一个多功能的阴影，如果你最终改变了一个不同的背景颜色(改变按钮背后的颜色)，它会给你带来灵活性吗?低透明度的纯黑色是达到这种效果的绝佳方法。它在不同的背景颜色中是一致的。
现在。在阴影和边界之间有一个重要的区别。
你可以设置阴影的样式，让它看起来像一个边界。你可以移除距离，移除模糊，设置大小为1像素。让这个阴影在按钮内部可见。
现在。我们为什么要这么做?因为边界会影响元素的尺寸。有时这并不是我们想要的。盒子阴影只是一种效果。因此，它们包含在样式面板的效果。(你可以使用框影来创建一个视觉边界。)
但是在另一个例子中，我们已经有了一个盒子阴影。我们将添加第二个阴影。双重阴影。
现在。也许有些人会想:“世界上根本就没有第二个影子。双重阴影并不存在。”
好。客观地说，这些人错了。因为它们确实存在。我们可以添加和样式额外的阴影(第二个阴影可以装饰不同-完全按照你想要的样子)。两个独立的阴影。
当你把状态加进去的时候，阴影就变得非常有趣了。让我们来研究一下。
按钮被选中后，我们可以在下拉菜单中选择状态，然后选择悬停。(我们现在设计鼠标悬停时按钮的样式-当鼠标悬停在它上面时。)如果我们向下滚动，我们可以看到我们之前添加的两个框阴影。但关键在于:如果我们想让这些框影移动，或模糊更多，或其他什么(如果我们想让我们在这里做的这些改变来影响鼠标悬停时的按钮)?好吧，我们很幸运。(因为我们设计了悬停状态的样式，所有这些改变都会影响悬停时按钮的外观。)
所以。让我们进入预览模式，我们可以看到按钮的样式和我们最初的样式一样，但是当我们悬停的时候?我们现在正在访问悬停状态的样式。(但…这有点突然。)
我们如何让它变得更好?让我们过渡到过渡。现在。过渡让我们在状态之间插入(它们将在无和悬停之间创建一个平滑的过渡…同样，我们可以进入下拉菜单，并看到，默认情况下，我们的样式为None)。None是我们要添加过渡的地方。如果我们往下看过渡部分，我们可以添加一个。
关于转场有一个重要的问题:我们需要选择我们想要转场的CSS属性。在本例中，我们影响了Box shadow，所以让我们选择Box shadow。默认是200毫秒。2秒)。
如果我们将鼠标悬停在CANVAS上的按钮上?我们可以看到我们的转变在行动中。实际上，我们可以在这里放慢速度(也许我们需要半秒;500毫秒)。也许我们想改变这个过渡的缓动曲线。
默认情况下，这很简单。并且，正如我们从AP World History中所了解到的那样，缓动可以通过比较一些具有缓动的东西，比如“线性”运动(从a点到B点的直接路径)来直观地表达出来。注意easing的效果，开始和结束的速度都比较慢，但是加速到动画的中间。
当我们影响缓动时也是一样的。我们可以选择我们想要的过渡选项(如果我们愿意，我们可以调整缓动曲线)，我们也可以用几种方式测试缓动效果。我们可以点击播放按钮来查看它的图形。我们可以将鼠标悬停在画布上的按钮上。
那转换其他属性呢?也许我们想要改变(让我们离开这里，回到我们的悬停状态)-也许在悬停的时候，我们想要向下并改变背景颜色。(让我们修改一下，悬停时有不同的背景颜色)
一旦我们完成了这些(同样，我们在Hover状态中设置样式)，让我们切换回None -因为我们知道，None是我们在状态之间添加转换的地方。如果我们现在悬停在它上面?背景颜色的变化是突然的(它是瞬时的)。这是因为就像盒子阴影一样，我们需要使过渡变成动画(我们需要添加一个影响背景颜色的过渡)。这里也是一样的。一旦我们选择了要转换的属性?我们可以设置它的时间(过渡所需的时间)，我们甚至可以进入并调整缓动曲线。
一旦我们匹配了这些属性?(顺便说一句，你的衣服不需要和你的相匹配。)这是一个设计决策，而不是一个开发决策，所以当然，做你觉得最好的。也许18。千毫秒。颜色转换的时间太长了吗?让我们看。
[Grímur]这是扣人心弦的。
完美的。现在所有状态之间都有一个过渡。事实上，如果我们悬停在外面，它会在同样的18秒内变回来。
[McGuire]在我们等待的时候，现在是时候提一下英语中有十四种标点符号了。逗号,冒号,半
(Grimur)分号，圆括号，句号，问号，感叹号，撇号，引号，方括号，大括号，破折号....
[McGuire]嗯，已经有12个了，但是我们没有时间了。但这是转换。过滤器呢?这是一个卡设计，它只是一个Div块，应用了一个类(类是card，但名称不重要)。重要的是每一张牌都应用了相同的类。任何一个被选中，我们都要往下添加一个过滤器。从下拉菜单可以看到很多。比如blur(模糊)，可以模糊事物。比如亮度，它使物体变亮(或变暗)。喜欢对比…
很明显，我们忽视了展示的原则;不要告诉。这是一个很长的嗡嗡声，我们意识到我们可以只展示一张幻灯片，在一秒内同时展示每个过滤器。
对于我们的示例，我们将选择灰度。我们希望这些是100%灰色的(我们的造型为None，但我们将改变悬停在一秒钟)。因为同一个类应用于所有这些，它们都是灰度的。让我们切换到悬停状态，悬停时，我们想让颜色回到图像上。因此，我们只需修改灰度值(将其设为0)，结果会是怎样的呢?嗯，我们使用Hover样式，所以让我们点击Escape(现在我们回到None)。灰度。悬停在这些卡片上?完整的颜色。
现在。这两个问题。首先，我们可以在无和悬停之间过渡这个效果吗?是的。我们只需要转到过渡(添加一个到我们的卡片)，然后选择过滤器。(这意味着我们正在转换Filter属性。)现在当我们悬浮的时候?200毫秒过渡。
第二个问题:灰度和饱和度有什么区别?什么时候我们会用一个而不是另一个?饱和是双向的。它可以将颜色降低到0%，但也可以在另一个方向上大幅提高饱和度。
灰度级?我们只控制了第一个。从技术上讲，它是倒过来的(因为0%饱和度和100%灰度是一样的)。
但重要的是要记住:无论我们使用什么过滤器，它都会影响整个元素(以及其中的所有子元素)。在我们的例子中，因为我们已经样式这个Div块(这张卡)，因为图像是INSIDE，图像也是灰度。另一种方式显示，如果我们把这个按钮放在卡片里面?没有那么丰富多彩。直到我们徘徊。
这是过滤器。现在，这一课最大和最好的部分:2D和3D转换。
这里有很多内容要讲，但让我们先从网络上一些更独特的2D和3D原理开始。当然，在HTML中，浏览器从左到右解释x轴，从上到下解释y轴。但是由于这都是基于行业标准的盒子模型，这与传统的坐标平面有一点不同。
因为在网络上，就像在数学中一样，x轴上的东西越向右越有价值，但在网络上，y轴上的东西越往下越有价值。所以一切都在增加(这些值从页面左上角开始)
当然，还有z轴。z轴是深度值。z轴值越大，显示的内容离屏幕越近。现在。屏幕上有个小星号。我们一会儿会讲到原因。
因为为了说明原因，我们需要用到变换。当我们的card被选中后，我们可以看到我们对None进行了样式化-让我们添加我们的第一个转换。在我们进入Z之前，让我们影响X表示左和右，我们可以使用Y表示上和下，注意这些变化(即使卡片在移动)，卡片内的所有东西都随着它移动。但是请注意，它没有影响文档的其他部分(页面上的其他东西没有被推来推去)。这是因为转换(无论是移动、旋转还是任何转换)不会扰乱文档。它们只影响选定的元素及其子元素。
您可能还会注意到，每次切换到tab(每次从Rotate切换到Move)时，我们会丢失其他选项卡的转换设置。这是因为转换需要作为独立的属性进行堆叠(我们可以有一个移动和一个旋转)，但我们需要添加第二个属性(添加第二个转换来同时实现这两个属性)。我们可以在列表中看到:我们有移动和旋转。
现在。那之前的星号呢?它怎么了?
因为当我们在讨论使用transform移动物体时，我们跳过了z轴，这将变得非常明显。这是深度轴。所以。对于这张牌，如果我们沿着z轴移动会发生什么。嗯,什么也不会发生。确实如此(数值在幕后发生了变化)，但它并没有在视觉上反映出来(让我们重新设置一下)。如果我们再沿着x轴和y轴旋转就会有不同的问题。这是……与我们在传统的3D空间中所期望的不完全一样(所有东西都是等距的——当然，等距投影是完全有效的，但这可能不是我们想要达到的风格)。因为为了让这一切发生，我们需要增加视角。
让我们展开布局。一个单独的部分，现在我们有三张卡片。它们都应用了相同的类。
我们将介绍两种向布局添加透视图的方法。(我们将讨论)。
第一个是这样的:把这部分想象成某种“照相机”(我们通过它看卡片的镜头)。您可以只选择section本身(我们可以在Navigator中看到这些卡片在section中-它们是section的CHILDREN)。你所要做的就是给一个元素一个3D效果(让我们的卡片变成3D)?是父对象(节)上的设置透视图。(我们所要做的就是在父部分本身设置Children透视图)。现在——注意我们是如何改变孩子的视角的(而不是自我视角)。让我们现在设置为1000像素，但我们稍后会演示不同的值的作用。
首先，现在section有了Children透视图集，我们可以选择任何子元素，并沿着z轴操作内容。(我们可以添加一个变换，并做一些像沿着z轴移动…将它们移近或移远。)但我们可以做得更多。让我们转换一下，学习旋转。因为现在我们已经在Section中添加了Children透视图，操作这些值(转换子元素)让我们能够在3D空间中处理这些卡片(具有逼真的深度)。
换种说法?(让我们用分屏演示一下)在顶部，这是在我们设置任何透视图之前发生的在我们在卡片的父元素上设置Children透视图之前。但在底部……这是儿童视角设置后的样子。左边的等距效应…右边更多的是透视投影。
但是注意到一些其他的东西:这些卡片?(通过我们应用的旋转变换?)它们不是相同的。我们说的不仅仅是这些卡片里面的东西——看看实际的角度(每张卡片上的边是不同的)。这是因为你是从区域的角度来看卡片(就像区域是一个相机)。当物体靠近边缘时，它们的翘曲会更加逼真(这种效果通常与相机上的广角镜头有关)。
事实上，我们可以试验并返回来演示Child的视角值实际改变了什么。回到我们的部分，让我们下去对Children视角做一些实时调整现在我们已经在我们的卡片上设置了转换。价值越高?更平坦的东西看起来(就像相机离被摄物更远——不那么夸张的视角)。但价值越低?这就像一台离拍摄对象很近的相机。视角被夸大了，效果更戏剧性。
但是如果你想要真正高级的呢?如果你想改变孩子视角的来源呢?也许你不想让剖面的中心看起来像透视的中心?你可以在child视角下的转换设置中进行调整…我们可以看到把它设置到左上角?改变我们的视角。最高?前对吧?我们甚至可以手动输入数值来改变透视原点的位置(基本上是镜头的中心)。
再说一遍，我们讲过两种设置视角的方法。儿童视角设置在Section是第一种方式。设置视角的第二种方法是什么?
因为如果儿童视角可以设置在像Section这样的东西上，将其变成相机效果……你如何看待自我?
[Grímur]我最近下载了一个冥想-像一个-应用商店?
[麦奎尔]现在不行，格里穆尔。我们用的是3D技术。SELF视角就像把每个元素本身变成一个迷你相机。请注意:我们将删除(我们将完全重置Section上的转换属性，所以根本没有设置透视图)。事实上，注意，现在，所有的东西看起来都是平的和等距的。但这一次吗?我们会选择任意一张牌本身。在CARD中，我们会进入并设置我们的自我视角。(同样，在前面，我们所做的是在父元素(section)上设置CHILDREN透视图，但现在我们在元素(card类本身)上设置Self透视图)。同样的事情在这里。
为了真正演示这个，让我们更显著地影响旋转。不同的是，这一次，角度都是一样的。左牌与中牌或右牌的外观并没有什么不同。事实上，它的视角是100%相同的，就像有一个独立的相机指向每个元素(每张卡片)。让我们在这里做另一个比较来看看区别。在顶部，有三张卡片，我们用第一种方法(儿童视角设置在SECTION上);在底部，是第二种方法(同样的卡片，但是在Section上不是Children透视，而是Self透视)。
两种不同的视角设置方式，两种不同的视觉效果。有正确的方法还是错误的方法?弗拉德吗?
(弗拉德)真的很……一个观点的问题。
谢谢你,弗拉德。这是很多。在这里学习的最好方式就是去尝试。因为有了3D透视，你可以结合我们目前为止所讲的很多东西。
事实上，在这个不同的例子中，我们有四张卡片(同样，它们都应用了相同的类)，这里的Section被设置为1000像素的Children透视(更夸张一点)，而不是样式None，让我们进入并影响悬停状态的转换。所以…在悬停时，我们可以向下，添加一个转换，并在这里做一些简单的事情来显示移动(稍微旋转物体)。
但我们还可以更进一步(实际上，我们将做两件事来让它更有戏剧性)。对于第一个，让我们回到None(一旦我们完成了Hover状态的样式)，并在这里添加一些过渡。同样，对于转换，我们希望选择具有样式更改的特定属性(在本例中是Transform)。我们将计时设为700毫秒，然后我们可以进入并选择缓动曲线(这些都可以，但让我们试试效果如何)不坏…如果我们测试悬停时物体的样子。
但这是我们能做的第二件事:让我们进入并选择我们牌的一个子牌。(我们已经知道每个CARD都将相同的类应用于其中的图像。)让我们选择IMAGE。我们可以尝试独立移动图像。(我们在None中设置图像样式。)但是，现在这些东西有了视角，我们可以做更多的变换。所以让我们把图像移向我们(这里我们用z轴——我们把图像移近一点)。这有什么用呢?它创造了足够的分离，当我们悬停在纸牌上时，我们便能够看到3D视差的运动(图像是纸牌的子元素，所以因为它现在离我们更近，所以它会随着纸牌旋转并带给我们更强的深度感)。
这里的可能性是无限的。但是还有更多的内容可以应用到几乎所有的这些方面，尤其是旋转。
因为(我们可以从这里的转换设置中访问这个部分…)-因为当处理旋转时，使元素的背面可见意味着当你旋转它时，它的背面是可见的。如果它是隐藏?背面是隐藏的。
这就留给我们最后一个话题，作为2D和3D变换的一部分:原点。有两种观点:第一种是所谓的大爆炸，这是一个描述宇宙膨胀的模型——你知道吗?这是维基百科上关于宇宙起源的文章。
《变形金刚》讲述了一个名叫擎天柱的汽车人如何——这是《变形金刚》系列的故事起源。
转换原点(这是在转换设置下列出的原点)描述从哪里进行转换。也就是说如果我们把它设为左上角?左起0%;从上到下0% ?我们添加到这个元素的任何变换都将围绕那个原点。注意旋转它是如何将左上角显示为那种“锚点”的。这就是我们说的原点变换的意思
要记住的东西很多，要做的实验也很多。所以尝试一下——最坏的情况是你做了一些破坏性非常大的事情，你必须从备份中恢复。(这是好的。我们都这样做。我们都有过这样的经历。)
但在我们结束这节课之前，让我们来强化它并总结一下我们已经讲过的内容。
我们讨论了不透明度，这花不了多长时间。我们讨论过游标和游标人。我们覆盖了盒子阴影(以及如何堆叠它们)，以及可以来回移动到Hover状态的过渡。我们介绍了滤镜，以及如何将滤镜与转场效果结合使用，创造出媲美《拆弹部队》、《神奇女侠》以及《变形金刚》等电影的视觉效果。我们讨论了2D和3D变换。(添加东西的能力…比如移动、缩放、旋转和倾斜)……我们介绍了如何在父元素(如section)上设置子元素透视，以便该section的子元素有一个透视投影，从而将section变成一种摄像机……当然，我们简单地开始讲述宇宙本身的起源。然后再一次意识到，史黛西从维基百科上打印了一份无关的文件。
以上就是Webflow Designer中关于效果的概述。
