当你创建2 d和3 d变换,或自定义动画状态转换,有很多进入。和这节课会迅速增加。我们将讨论透明度,游标,阴影,状态之间的转换,过滤器,当然,变换不同的2 d和3 d空间。
不透明度。它会让事情半透明的。如果你有重叠的元素?减少他们的不透明度降低不透明度。降低不透明度意味着你会看到更多的元素。
不透明度。游标呢?
(Grimur)有时我是一个遥控器,但我阻止我不听起来像一个a -
(McGuire)查明任何元素的默认光标行为是可以通过进入预览。(我们可以测试默认,光标自动行为。)当我们在一个链接吗?我们得到的指针。当我们在文本,文本的。
但如果我们想要覆盖汽车行为?选择与任何元素,我们可以去光标下拉,选择别的东西。当我们进入预览模式检查一下吗?我们可以移动光标在该元素,和里面的元素的边界,在这里。新游标。
现在。有一个光标应该使用以极大的克制。当然,我们是指没有光标,这看起来是这样的。更好的例子是选择我们的身体元素。我们设置光标在光标下拉菜单。我们将把它…没有一个。现在?当有人移动鼠标在页面的任何地方吗?
(Grimur)啊,我甚至不能看到我的鼠标。这是公牛,
(McGuire)阴影几乎可以应用到任何东西,所以让我们从游标移动到框阴影。这些可以增加视觉提升,相对于一个元素……在什么背景下你。
框阴影适用于元素本身(盒子;它的边界)。如果你有一个标题,你申请一盒阴影?也许这…视觉风格……是你的事情,没有判断。但注意阴影的应用盒子本身,而不是每个字母。(这就是文本阴影。)
但按钮或卡之类的东西吗?我们可以添加一个盒阴影这样的事情……但要注意如何切换一个内阴影…在边界)。让我们把它回来。
我们可以调整我们的所有属性,直到我们得到我们的影子寻找我们想要的方式。和记住的东西:它可能是诱人的(特别是在较轻的背景颜色)来设置你的影子一种灰色的颜色。但是如果你瞄准一个多才多艺的影子让你灵活处理如果你最终改变到一个不同的背景颜色(改变按钮背后的颜色)?纯黑的颜色透明度较低是一个很好的方法来实现这一看。它是在不同的背景颜色一致。
现在。这是一个重要的阴影和边界之间的区别。
你可以风格一个影子看起来像一个边界。你可以删除,你可以删除的距离模糊,并设置类似1像素的大小。让我们使这个影子内可见按钮。
现在。为什么我们会这样做吗?因为边界可以影响一个元素的尺寸。有时候这并不是我们想要的。盒阴影只是产生影响。因此包含在面板风格的影响。(您可以使用一个盒阴影来创建一个视觉边界。)
但在一个不同的例子,我们已经有一个盒阴影……我们将添加另一个影子。双重阴影。
现在。可能会有一些人想:“没有第二个影子。和双重阴影不存在。”
好。客观地讲,那些人是错误的。因为他们确实存在。我们可以添加和风格额外的阴影(第二个影子可以装饰完全不同——你所希望的方式看起来)。两个独立的阴影。
和阴影变得非常有趣,当你增加状态。让我们看。
与我们的按钮选择,我们可以选择从下拉状态,和去选择徘徊。(我们现在的样式在悬停按钮的样子,当我们徘徊。)如果我们向下滚动,我们可以看到两个框阴影我们之前添加。但这里的关键是:如果我们想要那些框阴影,或者更模糊,或者(如果我们希望这些变化我们这里影响什么按钮上悬停)?我们很幸运。(因为我们的样式在悬停状态,所有这些变化影响悬停按钮的样子。)
所以。让我们进入预览模式,我们可以看到,这个按钮样式是我们最初的风格,但当我们徘徊?我们现在访问悬停状态的风格。(但…这有点突然。)
我们如何做得更好?让我们进入过渡。现在。状态之间的转换让我们插入(他们将创建一个没有之间的平稳过渡和盘旋……再一次,我们可以进入下拉,看到,默认情况下,我们样式None)。没有一个是我们希望添加过渡。如果我们去转换,我们可以添加一个。
这是大的转变:我们需要选择CSS属性过渡。在这种情况下,我们影响盒阴影,所以我们选择框的影子。默认情况下是200毫秒(。2秒)。
如果我们在帆布上的按钮吗?我们可以看到我们的过渡。事实上,我们可以慢下来(也许我们想要半秒;500毫秒)。也许我们想要改变的缓和曲线过渡。
默认情况下,它是缓解。从美联社世界历史,正如我们所知,宽松可以表达直观地通过比较一些,说,“线性”运动(从a点到B点的直接路径),宽松。注意的宽松政策开始和结束慢,但是加速向中间的动画。
在这里也是一样的,当我们影响宽松。我们可以选择我们想要的选择过渡(我们可以调整如果我们想缓和曲线),我们也可以测试出宽松政策在几个方面。我们点击播放按钮就可以看到它制作成…或…我们可以在我们的按钮在画布上。
其他属性过渡呢?也许我们想要改变(我们走出去,回到我们的悬停状态)——也许在盘旋,我们想去和改变背景颜色。(让我们去改变它有一个不同的背景颜色徘徊)。
一旦我们做了,(再一次,我们的样式在悬停状态),让我们回到没有——因为我们知道,没有一个是我们添加状态之间的转换。如果我们现在在吗?背景颜色的变化是突然(瞬时)。这是因为就像盒子里的影子,我们需要动画过渡(我们需要添加一个过渡影响背景色)。这里同样的交易。一旦我们选择哪个属性转变我们的目标吗?我们可以设定时间(需要转换的时间),我们甚至可以去调整缓和曲线。
一旦我们匹配这些属性?(顺便说一下,你不需要比赛。)这是一个设计决策的多个发展的决定,当然,做你觉得是最好的。也许18。千毫秒。是,太多的时间过渡的颜色?让我们看。
[Grimur]这是扣人心弦的。
完美的。现在所有国家之间的过渡工作。事实上,如果我们盘旋,它会改变在同样的18秒。
(McGuire)当我们等待,现在是一个伟大的时间更有十四种标点符号在英文中。逗号,冒号,半
(Grimur)分号、括号、期、问号、感叹号、引号、引号、括号,括号,破折号....
(McGuire),其中12个,但我们没时间了。但这是转换。过滤器呢?这里有一个卡片设计,只是一个Div块类应用(类卡片,但名字不重要)。重要的是这些卡片同一个类应用。选择其中任何一个,我们要添加一个过滤器。我们可以看到一群从下拉。像模糊,模糊的东西。像的亮度,使事情更轻(或暗)。喜欢对比…
很明显,我们忽略了展示的原则;不要告诉。这是一个漫长嗡嗡作响,我们意识到我们可以同时显示一个幻灯片演示了每个过滤器超过1秒。
对于我们的例子,我们将选择灰度。和我们想要这些100%的灰色(我们的样式没有,但我们会改变徘徊在第二个)。因为同一个类是应用于所有这些,他们都是灰度。让我们去我们的悬停状态,在徘徊,我们想要回到我们这里的图片颜色。我们只是修改灰度值(我们只是让它0)。那是什么样子的呢?我们样式在盘旋,让我们逃离(现在我们回到没有)。灰度。在这些卡片吗?完整的颜色。
现在。这两个问题。首先,我们可以转变这种效果之间没有徘徊?是的。我们只是去转换(添加一个卡),并选择过滤器。(这意味着我们过渡Filter属性。)现在,当我们徘徊?200毫秒过渡。
第二个问题:灰度和饱和度之间的区别是什么?当我们使用一个在另一个吗?饱和两个方向。它可以减少颜色的0%,但它也可以,大大增加饱和度在另一个方向。
灰度级?我们只有控制第一个100%。和技术的反向(因为0%饱和度100%灰度)是一样的。
但重要的是要记住:无论我们使用过滤,它影响整个元素(加上任何孩子里面)。在我们的示例中,由于我们一直样式这个Div块(这张卡片),因为里面的图像,图像灰度。另一种方式,如果我们把这个按钮在卡吗?没有那么丰富多彩。直到我们徘徊。
这是过滤器。现在这节课的最大和最好的部分:2 d和3 d变换。
有很多报道,但是让我们先从一些更独特的2 d和3 d的原则。在HTML中,浏览器解释,当然,轴从左到右,轴从上到下。但由于这是所有基于行业标准框模型,这是一个比传统的坐标平面上有些不同。
因为在网络上,就像数学一样,事情在x轴上增加价值向右移动,但是,在网络上,沿着轴实际价值的增长,因为他们在页面上向下移动。所以一切都是增加(这些值将从页面的左上角)。
当然,我们有我们的z轴。z轴是我们的深度值。z轴的值越大,越近的东西出现在屏幕上。现在。在屏幕上有个小星号。我们将讨论为什么。
因为证明为什么,我们需要进入转换。选择与我们的信用卡在这里,我们可以看到样式,没有一个让我们添加第一个变换。和之前Z,影响X对于左、右、上下和我们可以用Y -注意这些变化(即使卡是移动的)一切卡内移动。但注意这不是影响文档的其余部分(页面上的其他事情不是摆布)。这是因为转换(无论是移动或旋转,或任何变换)——别惹文档转换。他们只会影响所选元素和元素的孩子。
您可能还注意到,每次我们选项卡(每次我们从像旋转开关移动),我们失去了改变设置其他选项卡。因为转换需要堆叠作为单独的属性(我们可以有一个移动和旋转),但我们需要添加第二个属性(添加第二个同时变换)。在列表中,我们可以看到:我们有移动和旋转。
现在。前的星号呢?发生了什么事吗?
因为在第二次看,它应该成为明显且令人痛苦的事实是,我们覆盖时跳过过去z轴移动东西使用变换。再一次,这是我们的深度轴。所以。如果我们沿着z轴移动这样的卡片。嗯,什么也不会发生。它(幕后的价值实际上是改变),但它不是作为反映视觉(我们重置它一秒钟)。我们有一个不同的问题,如果我们试着再一次沿着x轴和y轴旋转。这是……不是我们可能期望在传统三维空间(所有的等距——当然,等角投影是完全有效的,但它可能不是我们的风格来实现)。因为为了让这一切发生,我们需要添加的视角。
让我们扩大我们的布局。一个部分,现在我们有三张牌。每个人都有相同的类应用。
,我们将讨论两种方式添加视角这样的布局。(我们将讨论)。
第一个是这样的:认为部分的一种“相机”(镜头通过我们看卡片。)你可以选择部分本身(我们可以看到在这些卡片的导航器部分)的部分——他们的孩子。和所有你要做给一个元素一个3 d效果(让我们卡3 d) ?设置的角度对父(部分)。(所有我们要做的就是设置儿童视角父节本身)。现在——注意我们改变孩子的角度(不是自我的角度来看)。现在让我们做1000像素,但是在这里我们将演示不同的值做什么。
首先,现在部分有一组儿童的角度,我们可以选择任何子元素,实际上操纵的东西沿着z轴。(我们可以添加一个变换,做一些喜欢沿着z轴…移近或远。)但我们可以做得更多。让我们切换,在旋转工作。因为现在,我们增加了儿童视角的部分,操纵这些值(改变孩子元素)让我们用这些卡片做的东西在3 d空间(现实的深度)。
把不同的方式吗?(来演示这个分屏),这是发生了什么当我们之前设置任何观点之前,我们组儿童视角名片的父元素。但在底部…这是它看起来像孩子的角度设置后。等距效应在左边……更多的透视投影在右边。
但注意别的东西:这些卡片吗?(应用旋转变换我们?)它们不是相同的。和我们不只是谈论的事情在这些卡片,看实际的角度(每个卡片上的边缘是不同的)。那是因为你看到卡片的角度部分(如部分是一个相机)。在事情变得向边缘时,他们扭曲photorealistically(影响常与广角镜头相机)。
事实上,我们可以实验,回到演示实际上孩子角度值的变化。所以早在我们的部分,让我们下去做一些现在住调整孩子的角度来看,我们建立我们的卡片上的变换。越高的价值?浮华的东西(比如照相机远离主题——那么夸张的角度)。但越低价值吗?这就像一个相机很接近。透视图被夸大,效果更加明显。
但是,如果你想去真的先进吗?如果你想改变儿童视角的起源吗?也许你不想要的中心部分,感觉的中心的角度?你可以调整下的变换设置儿童视角……我们可以看到左上角设置?改变我们的视角。最高?前对吧?我们甚至可以手动输入值来改变我们的立场角度起源(基本上透镜的中心)。
再次,我们说我们讨论两种方式设置角度。儿童视角是第一节的方式。第二种方法设置的角度呢?
因为如果孩子视角可以设置类似的部分,把它变成相机效果……你做什么自我的角度?
[Grimur]最近我下载一个冥想-像一个应用程序商店吗?
(McGuire)不是现在,Grimur。我们在3 d。自我的观点就像每个元素本身变成了一个迷你相机。看看这个:我们要删除(我们完全重置变换属性部分所以没有角度设置)。事实上,注意,现在,一切看上去都奉承,等距。但这一次吗?我们将选择任何卡本身。卡,我们进去设置自我视角。(之前,我们所做的就是在父元素上设置儿童视角——的部分——但是现在我们设置自我视角元素——卡类本身)。同样的事情在这里。
真正的演示,让我们进去,影响旋转更显著。这里不同的是:这一次,角度都是一样的。没有差别的方式离开卡看起来比中心卡或正确的卡片。事实上,100%是相同的角度,就像有一个摄像机,每个元素(每张卡片)。让我们做另一个比较看的区别。顶部,三张牌第一种方法我们做到了(部分)上设置的有孩子的视角;在底部,第二种方法(相同的牌,而是儿童视角的部分,他们有自我的角度设置卡片本身)。
两种不同的方式的角度来看,两种不同的视觉效果。有一个正确或错误的方式吗?弗拉德吗?
(弗拉德)真的很……角度的问题。
谢谢你,弗拉德。这是一个很多,最好的学习方式是实验。因为在3 d的角度来看,你可以结合很多的事情到目前为止我们已经讨论过这一课。
事实上,在这不同的例子,我们有四个卡片(再一次,他们都有相同的类应用),这里的部分是设置为一个孩子的视角1000像素(更戏剧性的),而不是样式没有,我们走在悬停状态和影响我们的转换。所以…在徘徊,我们可以下降,添加一个变换,和做一些简单的运动(旋转东西略)。
但我们也可以把它一步(实际上,我们将做两件事让这个更大)。第一,让我们回到没有(一旦我们完成样式悬停状态),并添加一个过渡。再次转换,我们想要选择的风格改变的特定属性(在本例中,它的变换)。我们将我们的时间设置为700毫秒,我们可以选择宽松曲线(这些工作,但我们尝试如何看)。不坏…如果我们测试什么东西看起来像在盘旋。
但这是我们可以做的第二件事:让我们去选择一个孩子我们的卡片。(我们已经知道每张卡片都有相同的类应用到图像里面。)所以我们选择的形象。我们可以试着独立移动图像。(我们在没有样式图片)。但是,现在这些东西的角度来看,我们可以做更多的转换。让我们移动图像向我们(我们将使用这里的z轴-我们将图像接近)。做什么?它创造了足够的分离,当我们悬停在卡上,我们可以看到,3 d动态视差(卡的图像是一个孩子,所以现在因为它接近我们,它旋转卡,给了我们一个更大的深度)。
可能性是无限的。但有一点可以应用于几乎所有这一切——尤其是旋转。
因为(我们可以访问这部分从变换设置这里…),因为在处理旋转时,使一个元素的可见只是意味着当你旋转它,它是可见的。如果它是隐藏?是隐藏的。
,留下我们最后的主题涵盖的2 d和3 d变换:起源。有两个学派:首先是所谓的大爆炸,这是一个模型,描述了宇宙的扩张——你知道吗?这是宇宙的起源的维基百科文章。
变换原点描述了汽车人叫擎天柱w -这是“变形金刚”的起源的故事。
变换原点设置)(这是原点列在变换描述事情改变了。这意味着如果我们将它设置为左上的吗?0%从左边;0%从顶部?任何改变我们增加这个元素将围绕原点。注意旋转这显示左上角的“锚点的那种。“这就是我们的意思是当我们说“起源”的转变。
这是一个很多记住——很多尝试。所以试试,最差的情况你做出如此难以置信的破坏性从备份恢复。(这是好的。我们都做。我们都在那里)。
但在我们包装这一课,让我们加强它,总结我们所覆盖。
我们谈到了透明度,没多久。我们讨论了游标和遥控器的人。我们覆盖盒阴影(以及我们如何堆栈),来回转换可以动画要像盘旋。我们覆盖过滤器和如何使用它们与过渡创造视觉效果,竞争对手等电影《拆弹部队》神奇女侠,当然,《变形金刚》。我们讨论了2 d和3 d变换。(添加东西的能力……像移动、缩放、旋转和倾斜)…我们讨论如何设置儿童视角父元素像部分,这样孩子的部分有一个透视投影,将部分变成一种相机……当然,我们简要开始讨论宇宙的起源本身。在实现之前,再一次,史黛西打印出一个不相关的文档从维基百科。
影响的概述的Webflow设计师。
