网站设计的交互性

概览

在网站改版的过程中,想要让自己的网站,有动感,很酷的效果,会自动做出反应或相应屏幕的操作,那么想在自己的网站上实现这些效果。

有时,这些效果比美观的功能更实用。例如,考虑一种情况,当您完成不同的步骤时,可以将表单页面上的后续文本设置为显示出来。

这样的效果使网站具有交互性,使访问者获得整体满意的体验(考虑所有因素)。将它们放在您的网站上可以帮助转换更多合格的潜在客户,并在尚未购买的客户中吸引更多人。

但首先:您如何指代这些效果?有两种分类。在设计领域,它们被称为CSS的过渡和动画。

您可能已经注意到某些效果似乎更加复杂。JavaScript可以用来渲染这些效果,但是今天我们将讨论将它们与CSS一起使用。实际上,可以说CSS3是设置它们的更有效的方法。

CSS过渡与动画

CSS过渡和动画在很多方面都相似,但是在过渡的复杂程度,CSS代码与JavaScript的交互方式,循环的工作方式以及触发动画播放的方法方面却截然不同。通常,CSS过渡最适合简单的从头到尾的运动,而CSS动画则适合于更复杂的一系列运动。

在向您的网站添加这两种效果之前,您需要考虑哪种效果可以实现您想要的效果。混淆CSS过渡和动画很容易,因为它们使您可以执行类似的操作:

  • 您可以可视化属性更改。
  • 您可以设置缓动函数来控制属性值更改的速率。 
  • 您可以设置过渡或动画的持续时间。
  • 您可以指定用于解释更改并启动反应的属性。 
  • 您可以收集有关导致过渡或动画启动的事件的数据,并使用它来改善营销活动。

尽管它们在表面上有何相似之处,但每种选择都有其优缺点。在确定哪种移动视觉格式适合您之前,您需要了解它们如何在您的网站上运行以及需要做些什么。

CSS过渡

如果您只想在网站上执行简单的操作,则过渡是最简单的方法。转换与触发动作相关-最常见的是,当鼠标悬停在元素上时。在这种情况下,:hover伪类用于更改CSS属性值,从而使元素做出所需的反应。

您可以设置元素以更改其颜色比例位置。您还可以旋转倾斜平移对象。如果您想要更复杂的过渡,甚至可以同时影响多个属性。例如,如果您希望过渡更改背景颜色和宽度,则可以同时为background-colorwidth属性指定条目。 

CSS过渡和JavaScript

CSS中预定义的属性值可能会限制某些交互。在这种情况下,您可能希望使用JavaScript。但是,如果您不想完全使用JavaScript,则可以设置一种混合方法。 

如果您决定使用JavaScript管理更困难的方面,那么更简单的CSS过渡就是您的朋友。

CSS过渡示例

以下是CSS转换的示例。该图形根据触发动作的鼠标悬停在两个确定的状态之间交替。过渡可能有用,但比CSS动画更基本。

CSS过渡。

CSS动画

动画更加复杂,但也会给您带来更大的灵活性-灵活性越强,涉及的部分就越多。使用CSS动画,可以设置不同的阶段,以在元素持续时间内多次更改元素的行为。这使您可以更好地控制动画中的属性值。

为此,您定义关键帧。您可以根据需要设置任意多个。播放动画时,每个动画都会轮流命中,并且属性更改将反映在元素中。借助这些功能,您可以创建HTML5动画来与Flash等高级工具创建的动画相媲美。

动画还允许您在每个关键帧中指定属性值,而不必声明它们。一旦达到正确的关键帧,该元素就可以平滑地更改行为,即使该属性未在开始时列出

循环CSS动画

与仅在触发后播放一次的过渡不同,CSS动画不需要触发动作,可以设置为循环播放。您可以使它重复多次,也可以将其设置为永久。您可以使用animation-iteration-count属性来制定此规范,该属性可以将其值设置为秒数或infinite

有一种不太简单的方法可以通过使用transitionEnd事件来实现CSS过渡循环。但是,如果您喜欢添加循环,则CSS动画会更容易。

CSS动画示例

以下是CSS动画的示例。图形会通过多种状态并循环。蒸汽的尺寸缩小,上升,然后消失。该图像比CSS过渡要动态得多。

CSS动画。

CSS过渡和动画有很多相似之处。但是,很明显,它们之间也存在重大差异,这些差异应指导您如何在网站上使用它们来改善营销工作。过渡通常最适合简单的从头到尾的运动,而动画则适合于更复杂的一系列运动。

相关文章