Dreamweaver-CSS3制作简单动画

摄影摄像 Dreamweaver-CSS3制作简单动画

• 品牌型号：华为MateBook D
• 系统版本：Windows 10 10.3.3
• 软件版本：Dreamweaver2018

方法/步骤

1/6分步阅读

新建一个html文档，ctrl+s保存文件，建立一个div选框，如下图所示

[图][图]2/6

F12在浏览器中预览效果

[图]3/6

对div添加过渡效果【transiton: width 2s;】；设置过渡时间为2s

[图]4/6

添加：hover伪类效果，如下图

[图]5/6

在括号中添加属性值width:1000px;当鼠标经过div时，宽度在2s内慢慢变为1000px；

[图]6/6

在浏览器中预览效果，当鼠标经过div时发生变化，当鼠标移开时恢复原状态。

[图]

注意事项

如果此经验对您有帮助，请为我投票加关注，谢谢大家的支持^_^

编辑于2022-12-30，内容仅供参考并受版权保护