dw如何应用transition过渡特性?

日期:2020-12-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

Dreamweaver中导航栏菜单必须加上过渡动漫实际效果,这就必须会应用transition过渡特性,下面大家就看来看详尽的实例教程。

手机软件名字:
Adobe Dreamweaver CC 2018 V18.0 汉语/英文安裝版 32/64位
手机软件尺寸:
968MB
升级時间:
2017⑴0⑴9马上免费下载

1、在Dreamweaver中搭建1个简易导航栏,以下图所示,设定文本色调和情况色

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时,字体样式会渐渐地增大,产生1个动漫实际效果

以上便是dw中transition过渡特性的应用方式,期待大伙儿喜爱,请再次关心脚本制作之家。

有关强烈推荐:

Dreamweaver模块格如何拆分合拼?

Dreamweaver如何键入文字并设定文字款式?

dreamweaver如何完成电脑鼠标放在不一样的部位显示信息不一样的照片?