构建 HTML5 应用程序

  • 项目

CSS3 效果、过渡和动画

Clark Sell

 

作为 Web 开发人员，您可以使用三个工具来设计网页的效果并将其变为现实： HTML、CSS 和 JavaScript。 但情况并非总是如此。 过去，看似简单的效果（如文字阴影或渐变）却需要使用不同的图像编辑器，而不是使用 CSS 和 HTML。 虽然您确实可以使用 JavaScript，但要使 Web 应用程序变得流畅且生动通常需要编写大量的代码。 这些技术不仅让最初构建应用程序变得非常复杂，而且进行小小的更改都会产生高昂的成本。

所幸的是，CSS3 和 HTML5 不再需要使用过去的图像和 JavaScript 技术。 您可以使用简单的声明标记实现流畅的交互和美观漂亮的体验。

现在，如果您像我一样，您可能偷偷地笑了。 这是因为它是 CSS，而对于 HTML 而言却不是很简单。 但通过了解一些新的 CSS 属性并在一些很酷的演示中试用它们，您就会发现可以节省大量的开发时间，更不用说与客户协商特定效果所花的时间了。

阴影

让我们先从容易的地方入手，看看一些基本的阴影效果。 对于我来说，效果就是指改变对象外观的各种方法。 例如，看一下图 1 中的文字阴影和框阴影。

Shadow Effects
图 1 阴影效果

这种效果反映的是光源直接照射到物体上，而物体的阴影又投射到周围的物体上。 这有助于加大景深，有人甚至可能会说，这有助于使物体看起来具有浮动的效果。

添加阴影并不难，因此，让我们在标题中添加文字阴影：

h1 {
  text-shadow: black 2px 2px 12px 2px;   
}

下面是不同的文字阴影属性：

  • 阴影颜色（可选）。 您可以按名称指定颜色，也可以使用 HSL 或 RGBA 颜色名称。
  • 水平偏移（必需）。 这表示阴影的水平位置。 正值表示阴影在对象右侧；负值表示阴影在对象左侧。
  • 垂直偏移（必需）。 它设置阴影的垂直位置。 正值表示阴影在底部；负值表示阴影在顶部。
  • 模糊半径。 该值定义显示的阴影文字的清晰程度。 0px 是字体本身；值越大，对象边缘就越模糊。 不允许使用负值。
  • 扩展距离。 该值设置与阴影之间的距离，即，阴影形状如何向外扩展（正值）或向内收缩（负值）。

框阴影的工作方式与文字阴影相同，并具有相同的参数：

box-shadow: red 10px 10px 0px 0px;

阴影是相当常见的。 它们在元素（如按钮）上使用以提供景深，以及使用户了解元素的用途。 它们有助于使用户了解以下事实：特定对象与 UI 中的其他可见对象略有不同。 过去，您可能会使用 Photoshop 并创建 PNG 以表示按钮；但现在，您可以使用标记实现此目的。 当然啦，我这里只是抛砖引玉罢了。 您可以通过调整不透明度、边界半径、渐变和排版等，创建很多更显着的效果。

转换

通过使用 CSS 转换属性，您可以在大小或空间方面转换给定的元素。 为了说明这一点，让我们设置一个图像，以便在用户将鼠标指针悬停在图像上时，图像变大两倍：

#myImg:hover {
  transform: scale(2);
}

当然啦，这是 CSS，这意味着您确实需要包括任何适用的供应商前缀。 在本文的后面部分中，我省略了这些前缀，但前面的转换应如下所示：

#myImg:hover {
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o- transform: scale(2);
  transform: scale(2);
}

您还希望利用功能检测。 实际上，这是目前在您的网站中实现的最重要的做法之一。 并非使站点行为基于用户代理，您应该利用 Modernizr (modernizr.com) 等工具，您可以通过该工具了解浏览器的功能。 如果用户的浏览器不支持所需的特定功能，您可以改用填充代码，这是用于实现浏览器功能的填充程序。 这甚至适用于 CSS。 有关详细信息，请参阅“浏览器不应落伍： HTML5 采用策略”(msdn.microsoft.com/magazine/hh394148)。 现在，让我们回过头来说一说转换。

除了缩放以外，您还可以在 2D 或 3D 平面上应用转换。 对于 2D，您可以沿 X 和 Y 轴移动元素。 让我们编写一些文字并将其旋转 45 度：

 

.transform2d {
  transform: translate(0px, 0px)
             rotate(45deg)
             scale(1.45)
             skew(0deg, 0deg);
}

图 2 显示了旋转 45 度的框。

Transforming an Element in 2D Space
图 2 在 2D 空间中转换元素

现在 2D 具有不错的效果，但显然当今最时髦的是 3D，不过，不要误会，我们可不是让用户戴上什么特殊眼镜，但我们确实想让人们想像一下这些框从屏幕里跳出来的样子。 下面是实现此目的的代码：

.transform3d {
  transform-origin-x: 50%;
  transform-origin-y: 50%;
  transform: perspective(110px) rotateY(45deg);
}

所得结果在图 3 中显示。

A 3D Transform
图 3 3D 转换

过渡

现在，让我们探讨一下过渡，这可以让您将元素从一种样式或状态更改为另一种样式或状态。 我将从 hover 伪类入手。 过去，我们使用 CSS 来设置元素的状态，例如，其初始状态以及发生事件后的状态。 按钮元素和定位链接有两种状态：初始状态和悬停状态。 当用户激活悬停状态时，将设置这些属性。 下面是悬停在按钮上的简单示例：

#boxTrans:hover {
  background-color: #808080;
  color: white;
  border-color: #4cff00;
  border-width: 3px;
}

标准代码，无疑您以前编写过此类代码。 今天的浏览器速度非常快，状态转换几乎是瞬时完成的。 从性能的角度看，这是非常好的，但它产生一个新问题。 在某些情况下，这种状态变化可能太快了，或者根本看不出来。 这种快速微妙的变化可能导致用户根本注意不到。

通过使用 CSS3 过渡，您可以管理过渡所花的时间以及控制过渡的其他方面。 例如，您现在不仅可以让按钮自动更改背景颜色，还可以指定在该更改期间应发生的操作。

添加 CSS 过渡很容易，只需在基本元素中添加过渡命令即可。 例如，让我们创建一个包含一些文字的简单框。 当用户将鼠标指针悬停在该框上时，背景颜色、文字和边框将会发生变化：

#boxTrans {
  ...
transition: all .5s linear;
  ...
}
#boxTrans:hover {
  background-color: #808080;
    color: red;
    border-color: green;
}

正如您可能看到的一样，我在 #boxTrans 元素上定义了过渡。 我选择过渡此元素的所有属性，并且我希望它们在 0.5 秒内实现线性过渡（即，以恒定速度）。 我还可以通过仅指示特定的属性，选择过渡这些属性，如下所示：

transition: background-color .5s linear;

动画

对于过渡效果而言，您需要向浏览器指示开始和结束状态；而对于动画，您需要指定在特定时间内的一系列 CSS 属性。 动画实际上就是过渡的扩展。 要创建动画，您可以使用关键帧。 您可以将关键帧看作是某个项目在整个动画持续时间内某个特定时刻的状态。 让我们创建一个简单动画：一个来回滚动的小盒子。 首先，我定义元素：

<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>

让我们为该 div boxAnimation 添加一些样式，让它看起来像一个盒子：

<style>
...
.box {
  border: 1px solid black;
  background-color: red;
  width: 25px;
  height: 25px;  
  position: relative;
  }
...
</style>

完成此操作后，我将定义基本动画。 我需要设置动画关键帧及其持续时间。 如果未设置持续时间属性，则动画永远不会运行，因为默认值为 0。 我还会设置预计的动画运行迭代次数；此处，我希望它运行 10 次，每次运行 5 秒（如果您愿意，可以将动画迭代计数设置为无穷大，这会指示动画只要打开页面就运行）：

#boxAnimation {
  animation: 'not-knight-rider';
  animation-duration: 5s;
  animation-iteration-count: 10;
}

最后，我需要定义关键帧本身。 我将从在屏幕上移动盒子的简单关键帧入手。 为此，我设置了 from 和 to 属性，并让浏览器处理其余的属性：

@keyframes not-knight-rider {
  from {
    left: -100px;
  }
  to {
    left: 100px;
  }
}

如果运行此代码，则会看到一个红色盒子在屏幕上滚动，然后重复此动画效果。 正如我所提到的一样，您可以完全控制动画。 让我们更新该关键帧，以实际控制盒子在什么时间位于什么位置及其具体执行什么操作，如图 4 中所示。

图 4 控制动画

@keyframes not-knight-rider {
  from {
    left: -100px;
    opacity: 0;
  }
  25% {
    left: 100px;
    opacity: 0.5;
  }
  50% {
    left: -100px;
    opacity: 0;
  }
  75% {
    left: 100px;
    opacity: 0.5;
  }
  to {
    left: -100px;    opacity: 0;
  }
}

在图 4 中，我定义了关键帧将在单个迭代的给定时间点执行的操作。 我定义了起点 (to) 和终点 (from) 以及它们之间的一些点（以定义的持续时间的百分比表示）。 坦白地说，这不是很难。 如果要发挥您的想像力以制作炫酷的动画，那就另当别论了！

需要重申的是，要支持目前市场上的所有不同的浏览器，您必须使用相应的供应商前缀。 对于关键帧，它类似于 @-webkit-keyframes 等。

请注意，您可以在 bit.ly/I0Pa4d 中在线查看本文中提到的所有示例的工作示例，并且您还可以在 bit.ly/pF4sle 中查阅一系列精彩的互动动手实验 CSS3 演示，您可以在其中了解一些不同的 CSS 规范，而无需实际编写一行 CSS 代码。

您可能会注意到，这些演示是针对 Windows 8 的。 这是因为随着 Windows 8 的发布，Windows 团队引入了一种新的编程模型。 Web 开发人员现在可以利用他们的技能，使用 HTML5、CSS3 和 JavaScript 为 Windows 8 构建本机应用程序。 Microsoft 刚刚推出了全新的应用平台，方便您在全球范围内销售您的应用程序！ 我建议您访问 Windows 开发人员中心 (dev.windows.com)。

对于软件开发人员（Web 或其他方面）来说，这是一个激动人心的时刻。 技术发展速度如此之快，您的工具箱中很快就会装满全新的工具。 不管怎么说，拥有很多供您选用的工具和技术是非常值得期待的。 如果您只需添加几行 CSS 代码即可实现阴影效果，那么，您就可以把省下来的功夫用在多创建几幅漂亮的图像上面了。

Clark Sell 是 Microsoft 在芝加哥之外的资深 Web 和 Windows 8 推广人员。 他的博客地址为 csell.net，播客地址为 developersmackdown.com，还可以通过 Twitter 地址 twitter.com/csell5 与他取得联系。

衷心感谢以下技术专家对本文的审阅： John Hrvatin 和 Brandon Satrom