人机交互界面的设计第五章 CSS3详解.pptVIP

07 css3中的动画 ----animation动画 动画变换速率animation-timing-function 该属性指元素动画运动时的变换速率，使用方法也与transtion-timing-function相似 动画开始时间animation-delay 该属性用来指定元素动画开始时间。与transition-delay使用方法一样，如： 选择器{animation-delay:1s;}，表示1s之后执行该动画，其默认值也是0。 循环播放次数animation-iteration-count 该属性用来指定元素播放动画的循环次数。 语法为：选择器{animation-iteration-count:number;}，number的取值可以是1，2，….等数字，默认值为”1”,如果需要无限循环，择取值为“infinite”。 07 css3中的动画 ----animation动画 动画播放方向animation-direction 该属性用来指定元素动画播放的方向，有2个取值，分别为normal、alternate 简写属性animation 语法为：animation:animation-name,animation-duration/animation-timing-function/…; 具体的用法如：animation:’pic’ 2s ease-in 1s infinite alternate; END THANK YOU 05 css3基本属性 ----背景属性 背景大小 背景大小是css3的新属性，background-size属性可以用来定义背景图片的尺寸。 用法为：background-size:100px 200px/ 40%/cover/content。 简写背景属性 部分属性可以简写到background属性里面， 用法为：background：#00ff00 url(images/01.jpg ) repeat-x top 30px left 30px scroll; 05 css3基本属性 案例 请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。 ----背景属性 05 css3基本属性 文字字体 网页中，文本的颜色，间距行距，字体大小，字体效果多种多样，我们必须为之排版，才能使网页看起来重点分明，简明整洁 ----文本属性 设置文字字体属性为 font-family，基本语法：font-family:字体 1,字体 2,字体 3; 文字大小 通过font-size来控制文字大小，基本语法：font-size:尺寸/百分比/关键字。 文字倾斜 文字样式为斜体时，使用font-style属性。 基本语法：font-style:normal/italic/oblique; 05 css3基本属性 文字粗体 ----文本属性 文字需要为粗体显示时，使用font-weight属性。 基本语法：font-weight:normal/bold/bolder/lighter/number; p{font-weight:bold;} 文字颜色 设置颜色用color来定义。用法color:颜色名称；color:#000000；color:rgb(0,0,255)。 英文字异体 属性为font-variant，作用是将所有小写字母转换为小型大写字母， 基本语法：font-variant:normal/small-caps; 05 css3基本属性 简写属性 ----文本属性 与背景属性一样，font也有简写属性， 用法：font:italic bold 30px 微软雅黑， 文字修饰 修饰文字是指为文字添加下划线、删除线和上划线。 基本语法：text-decoration: underline|oveline|line-through|blink|none; 英文字母大小写转换 该属性为text-transform， 基本语法：text-transform:none/capitalize/uppercase/lowercase 05 css3基本属性 中文字符间距 ----文本属性 通过letter-spacing属性可以用来调整中文字符或英文字符之间的间距， 用法：letter-spacing:normal/长度， 英文单词间距 属性为 word-spacing，用来调整英文单词之间的间距 基本语法：word-spacing:normal/长度; 文本水平对齐方式 text-align可以改变文本行之间的对齐方式 基本语法：text-align:left/right/cente