HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画.pptx

第11章CSS3特效和动画;11.1圆角;11.1.1设置边框为圆角;【示例11-1】设置元素的边框为圆角。;11.1.2设置每个圆角为指定值;【示例11-2】分别设置元素的4个圆角。;11.2透明度;【示例11-3】设置图片和背景的透明度。;11.3背景;【示例11-4】设置元素的背景色和背景图像。;11.4渐变;11.4.1线性渐变;【示例11-5】实现多种线性渐变效果。;11.4.2径向渐变;atposition;【示例11-6】实现多种径向渐变效果。;11.52D和3D转换;为了兼容多种浏览器语法格式如下。;11.5.12D转换;【示例11-7】实现多种2D转换效果。;11.5.23D转换;3D转换的属性如下所示。;【示例11-8】实现多种3D转换效果。;20 divid=Div1元素默认样式/div

21 divid=Div2X轴旋转/div

22 divid=Div3Y轴旋转/div

23 divid=Div4Z轴旋转/div

24 /div

25 h3class=cf子元素为2D/h3

26 divclass=bc2bc

27 divid=Div1元素默认样式/div

28 divid=Div2X轴旋转/div

29 divid=Div3Y轴旋转/div

30 divid=Div4Z轴旋转/div

31 /div

32 h3class=cf子元素为3D/h3

33 divclass=bc3bc2bc

34 divid=Div1元素默认样式/div

35 divid=Div2X轴旋转/div

36 divid=Div3Y轴旋转/div

37 divid=Div4Z轴旋转/div

38 /div

39 /body

40 /html

;11.6过渡;【示例11-9】实现多种过渡效果。;11.7动画;animation属性用于调用定义动画的播放效果，其语法格式如下。;【示例11-10】实现多个动画效果。;11.8小结