3.5 案例实训2——开发电商网站特效

本案例使用Bootstrap的网格系统进行布局，其中设置了一些电商网站经常出现的动画效果。最终效果如图3-25所示。

图3-25 页面效果

当鼠标指针悬浮到内容包含框（product-grid）上时，触发产品图片的过渡动画和2D转换、产品说明及价格包含框（product-content）和按钮包含框（social）的过渡动画，效果如图3-26所示。

图3-26 触发过渡动画和2D转换效果

当鼠标指针悬浮到功能按钮上时，触发按钮的过渡动画，效果如图3-27所示。

下面来看一下具体的实现步骤。

第1步：使用Bootstrap设计结构，并添加响应式，在中屏设备中显示为一行4列，在小屏设备中显示为一行2列。

第2步：设计内容。内容部分包括产品图片、产品说明及价格、3个功能按钮。下面是其中一列的代码，其他三列类似，不同的是产品图片、产品说明及价格。

第3步：设计样式。样式主要使用CSS 3的动画来设计，为产品图片添加过渡动画（transition）以及2D转换（transform）；为产品说明及价格包含框（product-content）、按钮包含框（social）和按钮添加过渡动画。具体样式代码如下：