Presentation is loading. Please wait.

Presentation is loading. Please wait.

武汉纺织大学传媒学院 cm.wtu.edu.cn

Similar presentations


Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第25节 CSS3过渡 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/11/18 传媒学院

2 1.过渡属性 过渡是css3引入的一个属性 CSS3过渡是从元素从一种样式逐渐变成另一种的效果 支持浏览器 transition
Internet Explorer 10、Firefox支持 transform 属性 Chrome 和 Safari 需要前缀-webkit- 2018/11/18 传媒学院

3 2.语法 例子 transition: 2s; -webkit-transform: 2s;
使用以上css的标签,如果发生样式变化,则变化会在2秒钟内逐渐完成 2018/11/18 传媒学院

4 在逐渐的旋转 2018/11/18 传媒学院

5 3.带过渡的转换效果例子 有一个居中div(100*100),蓝底,鼠标放在上面,其背景色变成红色,大小变成200*200,且在旋转360度,这一变化持续3秒 步骤 1.编写div HTML代码,设置其最初样式 2018/11/18 传媒学院

6 3.给div添加hover伪样式 2.给div样式添加过渡属性 transition: 3s; -webkit-transform: 3s;
在生成的css代码处加上转换属性 2018/11/18 传媒学院

7 效果 2018/11/18 传媒学院

8 作业 设置一个div,其中包含文字“武汉”,大小16px,颜色为红色,div大小为100*100,居中,有绿色边框;鼠标放在该div上时,出现如下效果:“武汉”的大小变成32px,颜色变成蓝色,且div旋转180度,边框颜色变成紫色;以上变化在5秒内渐变 2018/11/18 传媒学院


Download ppt "武汉纺织大学传媒学院 cm.wtu.edu.cn"

Similar presentations


Ads by Google