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选项。