08 在代码视图中选中文字，按Delete键删除。

09 插入<a>标签并设置样式，如图。

10 添加hover的样式，并定义背景图案。

11 保存后按F12键在浏览器中测试效果。

接下来将代码应用到装修店铺中，由于hover效果的代码由两部分组成，一部分是body标签中的代码，可以直接装修到店铺的“自定义内容区”模块；另一部分是style标签中的外部样式代码，这部分代码不能直接应用到店铺中，而需要在淘宝卖家服务页面订购旺铺CSS。进入“卖家中心”，选择“卖家服务”选项，在服务搜索框中输入“CSS”，单击“搜索”按钮，在旺铺CSS订购页面单击“立即订购”按钮即可。

订购后将代码的外部样式部分装修到“自定义CSS”区域，将body标签内的代码装修到“自定义内容区”模块。

神奇的动画过渡

动画的过渡是通过transition实现的。

1. Transition写法

Transition写法为

transition：产生过渡的属性 时长 速度曲线效果延迟。

产生过渡的属性：大多数情况下写成all，表示所有变化的属性都会产生过渡的动画。如果需要控制哪个属性，就需要将其写得详细些，如宽、高、边框和颜色等。

时长：控制动画的持续时间，持续时间越长，动画速度越慢。时长写法为：5s。

速度曲线：用于控制变化的加减速率曲线，包括ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）和ease-in-out（加速然后减速）。

效果延迟：定义过渡效果何时开始。

2．实例——用transition实现动画过渡

下面以实例讲解用transition实现动画过渡。

01 在Dreamweaver软件中新建HTML文档，在“插入”面板中选择Div选项。