css3 html5做网页动画效果
作为 Web 开发人员，我们可以借助 HTML、CSS 和 JavaScript 这三种工具来设计并实现网页效果。但在过去，实现一些看似简单的效果，如文字阴影或渐变，往往需要依赖不同的图像编辑器，而非直接使用 CSS 和 HTML。虽然 JavaScript 也能实现这些效果，但要让 Web 应用程序变得流畅且生动，通常需要编写大量代码。这不仅增加了应用程序初始构建的复杂性，而且后续进行微小更改也会产生较高成本。
幸运的是，CSS3 和 HTML5 的出现改变了这一局面，我们不再需要依赖过去的图像和 JavaScript 技术，通过简单的声明标记就能实现流畅的交互和美观的用户体验。也许你会对此心存疑虑，毕竟 CSS 虽然看似简单，但对于 HTML 而言并非如此。不过，当你了解一些新的 CSS 属性并在实际演示中试用它们时，就会发现能节省大量开发时间，更不用说与客户协商特定效果所花费的时间了。
阴影效果
我们先从基础的阴影效果开始。阴影效果是改变对象外观的一种方式，它模拟了光源直接照射物体，物体的阴影投射到周围物体上的场景，有助于增加画面的景深，甚至让物体看起来具有浮动效果。
添加文字阴影
在标题中添加文字阴影并不复杂，以下是示例代码：
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);
}
需要注意的是，在实际应用中，为了确保兼容性，需要包含适用的供应商前缀：
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
同时，建议利用功能检测来了解浏览器的功能。可以使用 Modernizr（modernizr.com）等工具，如果用户的浏览器不支持所需的特定功能，可以使用填充代码来实现相应功能。有关详细信息，请参阅“浏览器不应落伍： HTML5 采用策略”（msdn.microsoft.com/magazine/hh394148）。
2D 转换
除了缩放，还可以在 2D 平面上应用转换，例如沿 X 和 Y 轴移动元素，或者旋转元素。以下代码将文字旋转 45 度：
.transform2d {
transform: translate(0px, 0px) rotate(45deg) scale(1.45) skew(0deg, 0deg);
}
3D 转换
如今，3D 效果在网页设计中也很流行。下面的代码可以让元素在 3D 空间中进行转换：
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
过渡效果
过渡效果可以让元素从一种样式或状态平滑地过渡到另一种样式或状态。我们以 hover 伪类为例，过去使用 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>
然后，为该元素添加样式：
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
接着，定义动画的基本属性，包括动画名称、持续时间和迭代次数：
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
最后，定义关键帧：
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
运行上述代码，会看到一个红色盒子在屏幕上滚动并重复动画效果。我们还可以进一步控制动画，例如更新关键帧来控制盒子在不同时间的位置和透明度：
@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;
}
}
需要注意的是，为了支持市场上的所有不同浏览器，必须使用相应的供应商前缀，例如关键帧需要使用 @-webkit-keyframes 等。
你可以在 bit.ly/I0Pa4d 中在线查看本文中提到的所有示例的工作示例，还可以在 bit.ly/pF4sle 中查阅一系列精彩的互动动手实验 CSS3 演示，在其中了解一些不同的 CSS 规范，而无需实际编写一行 CSS 代码。