跳到主要内容

创建灵活的UI动画

A team page showing team member photos, names and job titles with rollover animation that shrinks the size of the profile image, brings down a coloured circle from the top and brings up social media icons from the bottom.

设计师和开发人员越来越频繁地认识到运动设计在其背景下的重要性用户体验。网络上的动画不再是让用户高兴和惊叹的一种方式,而是一种让体验变得轻松,有趣和难忘的功能性工具。并且有许多不同的工具和方法可供选择CSS动画使用Bootstrap或HTML的技术。

用户界面环境中的动画仍然是一个非常新的领域。没有很多资源可以教授最佳实践或显示我们可以遵循的UI动画的常见模式。大多数时候,这是关于实验,用户测试也许是一些试验和错误。

所以在本教程中,我们将创建一些不会混淆的东西,遵循常见的模式并且很时尚。这将是您经常在公司网站上看到的团队资料部分。我们的想法是在每个人徘徊时向团队/工作人员展示更多信息。在整个教程中,我们将使用CodePen,但您当然可以使用自己喜欢的编辑器和开发环境。

01.设置好

首先打开CodePen并创建一个新笔。我们将使用Bootstrap 4和Sass(.scss),因此请确保在设置中包含Bootstrap CSS和JS作为资源链接,并将CSS设置为SCSS。您需要添加的另一个资源链接是Font Awesome,我们将用于社交图标。

02.创建容器,行和列

容器是Bootstrap用作其基本布局元素的,当您使用默认网格系统时,它们是必需的。在容器中,您需要连续添加。行是列的包装器,您可以指定可能的12列中的列数以及断点。在我们的例子中,我们想要一个具有中等大小断点的元素,并在宽度上填充三列。

    
      
              


翻译字数超限