《HYLI5教程课件》_《HYLI5教程课件》_第四章 CSS新样式修饰网页.pptxVIP

;;;;;;;4.2.1CSS样式介绍;;3.样式引入方式;行内式;行内式;;4.3.1属性选择器;4.3.2关系选择器;2.兄弟选择器;2.一般兄弟选择器（~）;4.3.3结构化伪类选择器;E:nth-of-type(n);1.root选择器;;;4．:first-child和：last-child选择器;5．:nth-child(n)和:nth-last-child(n)选择器;6．:nth-of-type(n)和:nth-last-of-type(n)选择器;7．:empty选择器;8．:target选择器;4.3.4伪元素选择器;1.before选择器;;【案例引入】;;;;1.direction;2.text-shadow;;3.box-shadow;;4．text-overflow;;6．word-wrap;7．word-break;4.4.3多列;;3．column-rule;4.4.4定义字体;4.4.5透明度;2．rgba();4.4.6HSL和HSLA颜色表现方法;1.hsl();2．hsla();【案例引入】;;4.5.1CSS3的过渡;1．transition-property;2．transition-duration;3．transiton-timing-function;4.ransition-delay;5．transition;4.5.2CSS3的变形;1．2D转换;（2）缩放

scale()方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。其语法格式如下。

transform:scale(x-axis,y-axis);

在上述语法中，x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。;（3）倾斜;（4）旋转;参数;2．3D转换;;;方法名称;;4.5.3CSS3动画;2．animation属性;（2）animation-duration属性

animation-duration属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计。其语法格式如下。

animation-duration:time;

在上述语法中，animation-duration属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。;（32）animation-timing-function属性

animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。其语法格式如下。

animation-timing-function:value;;（4）animation-delay属性

animation-delay属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。其语法格式如下。

animation-delay:time;

在上述语法中，参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。

在例4-75的基础上进行演示animation-delay属性的使用，在CSS中添加如下代码。

animation-delay:2s;

-webkit-animation-delay:2s;

此时，刷新浏览器页面，动画开始前将延迟2s的时间，然后才开始执行动画。

（5）animation-iteration-count属性

animation-iteration-count属性用于定义动画的播放次数。其语法格式如下。

animation-iteration-count:number|infinite;

在上述语法格式中，animation-iteration-count属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。

继续在例4-75的基础上进行演示，在CSS中添加如下代码。

animation-iteration-count:3;

-webkit-animation-iteration-count:3;

使用animation-iteration-count属性定义动画效果需要播放3次。此时，刷新页面，动画效果将连续播放三次后停止。;（6）animation-direction属性

animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。其语法格式如下。

anima