HTML如何制作过度效果

2025-10-13 09:58:46

1、首先我们来打开Dreamweaver CC，我用是CC版本，CS6版本也可以。

HTML如何制作过度效果

2、新建一个HTML的文件来制作准备（这个相比大家都熟悉- . -！）。

HTML如何制作过度效果

3、首先在body框架里创建一个div作为过度效果框架。

HTML如何制作过度效果

4、在上方添加一个命名过渡框架的CSS样式，背景设为黑色。

HTML如何制作过度效果

5、之后把宽度width和高度height都设成100px，左浮动代码float: left;。

HTML如何制作过度效果

6、最后把过度效果"transition”添加进去以及伪类hover，下面是各个浏览器的兼容代码。

HTML如何制作过度效果

7、最后效果就是这样啦。

HTML如何制作过度效果

8、完整代码：

<!DOCTYPE html>

<html>

<head>

<style>

div#transition{

float: left;

width:100px;

height:100px;

background:#000;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */}

div#transition:hover{width:600px;}

</style>

</head>

<body>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。