HTML对于攻城狮来说在熟悉不过了，很多程序小白对于其中的过度效果“transition”，小编写下来为大家详解一下HTML如何制作过度效果。
工具/原料
1
一台电脑
2
Dreamweaver CC/CS6
方法/步骤
1
首先我们来打开Dreamweaver CC，我用是CC版本，CS6版本也可以。
3
首先在body框架里创建一个div作为过度效果框架。
4
在上方添加一个命名过渡框架的CSS样式，背景设为黑色。
5
之后把宽度width和高度height都设成100px，左浮动代码float: left;。
6
最后把过度效果'transition”添加进去以及伪类hover，下面是各个浏览器的兼容代码。
7
最后效果就是这样啦。
8
完整代码：
注意事项
1
背景除了颜色，图片也是可以的，只是要设置背景居左或居右。
2
浏览器兼容兼容代码不好记可以暂时不放,单独'transition:width 2s;'也是可以的。
3
如果把浮动float变为右浮动right，它会居右从左侧过度效果出来。
上一篇：PPT应具备的要素