Download presentation
Presentation is loading. Please wait.
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 传媒学院
Similar presentations
