dw怎么使用transition过渡属性?
百度经验 发布时间：2018-05-31 16:53:20 作者：患者无薪 
我要评论
我要评论dw怎么使用transition过渡属性？Dreamweaver中的导航菜单想要添加过渡动画，这需要是哦用哪个transition过渡属性，下面我们就来看看详细的教程，需要的朋友可以参考下
Dreamweaver中导航菜单需要添加过渡动画效果，这就需要会使用transition过渡属性，下面我们就来看看详细的教程。
1、在Dreamweaver中构建一个简单导航，如下图所示，设置文字颜色和背景色
2、点击打开文件中的-拆分
3、可以在软件中实时预览效果
4、对其中的li添加：hover属性，当鼠标经过li时，字体和背景颜色发生变化，如图当鼠标经过li时，背景颜色变为黄色，字体变为黑色
li:hover{background-color:yellow;color:black;｝
5、在li:hover{} 中添加transition过渡动画，transition后面添加变化的属性及属性变化的时间，如下图所示transition:background-color 0.5s;意思是对background-color背景颜色设置过渡动画，当鼠标经过li时，背景颜色会慢慢变为黄色，中间时间为0.5s
6、如果里面包含多个属性时，transition后面的属性可以使用all来代替，比如这里的背景颜色和字体颜色两个属性，使用all全部代替，当鼠标经过Li时，字体和背景颜色会慢慢改变
7、如果在hover中设置文字字号，设置为字号50号时，当鼠标经过li时，字体会慢慢变大，形成一个动画效果
以上就是dw中transition过渡属性的使用方法，希望大家喜欢，请继续关注脚本之家。
相关推荐：
dreamweaver怎么实现鼠标放在不同的位置显示不同的图片?
相关文章
Dreamweaver怎么给个人简历添加照片并排版？使用Dreamweaver制作了一个个人简历，想要给个人简历添加自己的照片，并给图文排版，该怎么操作呢？下面我们就来看看详细的教程2017-10-23
Dreamweaver怎么设计彩色边框的表格？想要制作一个五颜六色变宽的表格，该怎么制作呢？我们需要使用CSS样式来制作，下面我们就来看看详细的教程，需要的朋友可以参考下2017-10-23
dreamweaver cs6怎么给网页添加float浮动效果?
dreamweaver cs6怎么给网页添加float浮动效果？在浏览网页的时候，经常能在网页中，看到有float浮动布局，该怎么给网页添加float浮动效果呢？请看下文详细介绍，需要的朋友2017-09-25
Dreamweaver怎么自定义设置返回步数？Dreamweaver中有可以撤销的步数，该怎么设置呢？下面我们就来看看详细的设置教程，需要的朋友可以参考下2017-09-04
Dreamweaver怎么给网页制作跳转菜单？网页需要一个跳转菜单，该怎么制作这个跳转菜单呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下2017-08-10
Dreamweaver网页怎么制作一个带有列表值的下拉菜单?
Dreamweaver网页怎么制作一个带有列表值的下拉菜单？Dreamweaver设计网页的时候，需要添加一个下拉菜单，并且给下拉菜单添加列表值，下面我们就来看看详细的教程，需要的朋2017-08-10
Dreamweaver怎么给网站添加一个动态横幅效果？Dreamweaver中想要设计一个动态横幅，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-07-27
Dreamweaver怎么设置html网页段落行间距？Dreamweaver中设计网页的时候，发现文字段落间的行间距不适合，想要调节一下，下面我们就来看看详细的教程，需要的朋友可以参考下2017-07-26
Dreamweaver8怎么修改网页标题？设计的网页是有标题的，但是如果想要修改标题，该怎么修改呢？下面我们就来看看Dreamweaver修改网页标题的教程，需要的朋友可以参考下2017-07-26
Dreamweaver CS6怎么使用项目列表？Dreamweaver制作网页内容的时候，为了等级分明，需要使用项目列表，下面我们就来看看详细的教程，需要的朋友可以参考下2017-07-26
最新评论