HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 第5章 CSS特效

第5章CSS特效《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents5.1滤镜5.2过渡5.3动画5.4转换5.45.5项目滤镜5.15.1滤镜CSS3的滤镜（filter）属性提供了模糊和改变元素颜色的功能，常用于调整图像的渲染、背景或边框显示效果。多个滤镜之间用空格隔开。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1滤镜filter的属性属性值描述属性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate饱和度contrast对比度hue-rotate色相旋转blur模糊invert反色drop-shadow阴影urlurl函数接收一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}举例（filter-grayscale）灰度grayscale()grayscale()用于将图像转换为灰度图像。grayscale()参数值为0～1的小数，也支持0%～100%百分比的形式。如果没有任何参数值，默认将以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}举例（filter-blur）模糊blur()blur()用于给图像设置高斯模糊。参数值设置为高斯函数的标准差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}举例（filter-brightness）brightness()用于调整图像的亮度，默认值为100%或者1。如果其值超过100%，就意味着图片拥有更高的亮度。如果值是0%，图像会全黑。值是100%，则图像无变化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}举例（filter-contrast）调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。超过100％的值将提供更具对比度的结果。若没有设置值，默认是1。对比度contrast()drop-shadow()用于给图像设置一个阴影效果。<offset-x><offset-y>（必选）：<offset-x>可设置水平方向的距离，负值会使阴影出现在元素的左边；<offset-y>可设置垂直方向的距离，负值会使阴影出现在元素的上方。如果两个值都是0,则阴影出现在元素正后方。<blur-radius>（可选）：值越大，越模糊，则阴影会变得更大更淡。不允许负值，若未设置，默认值为0（阴影的边界很锐利）。<spread-radius>（可选）：正值会使阴影扩张或变大，负值会使阴影缩小。若未设置，默认值为0（阴影会与元素一样大小）。<color>（可选）：若未设置该属性，颜色值将根据浏览器的默认设置来进行显示。举例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}阴影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);举例（drop-shadow）阴影drop-shadow()这个函数有点类似于box-shadow属性。box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。Tipdrop-shadow和box-shadow相似，都是实现投影效果,它们有什么区别呢？box-shadow阴影可以任意叠加，drop-shadow不能阴影叠加，但是它是真正意义上的投影！而box-shadow只是盒阴影而已。举例（box-shadow3）（box-shadow4）（区别1）（区别2）阴影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}举例（filter-hue-rotate）hue-rotate()设置图像应用色相旋转。取值为0deg，则图像无变化。若值未设置，默认值为0deg。该值没有最大值，超过360deg时相当于又绕一圈。色相旋转hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}举例（filter-invert）invert反色会把图片变成底片的感觉值为100%是完全反转值为0%则图像无变化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}举例（filter-opacity）透明度opacity()opacity()用于定义透明度，默认值为1。值为0%则图像完全透明，值为100%则图像不透明。该函数与已有的opacity属性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有浏览器都支持opacity属性，IE8及更早的版本支持替代的filter属性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以为兼容可写为：透明度opacity()举例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}举例（filter-saturate）定义图像饱和度。值为0%是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，表示具有更高的饱和度。默认值为1。饱和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}举例（filter-sepia）将图像转换为深褐色。参数值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。默认值为0.褐色sepia()filter可以整合多个滤镜，滤镜之间可使用空格分隔开。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}举例（filter）符合函数filter()顺序是非常重要的(例如使用grayscale()后再使用sepia()将产生一个完整的灰度图片)。Tip过渡5.2transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的CSS属性的名称。transition-duration定义过渡效果花费的时间。transition-timing-function规定过渡效果的时间曲线。transition-delay规定过渡效果何时开始。CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1、指定要添加效果的CSS属性。2、指定效果的持续时间。Transition过渡把鼠标指针放到div元素上，其高度会从100px逐渐变为300px。举例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition过渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠标指针放到div元素上，其宽度会从100px逐渐变为300px。Transition过渡举例（transition）transition-property

属性用于指定应用过渡效果的CSS属性的名称。基本语法格式transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。transition-property举例(transition-property)transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-duration:time;transition-duration举例(transition-duration)transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。基本语法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);举例(transition-timing-function)transition-timing-functiontransition-timing-function属性的取值属性值描述linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。transition-timing-functiontransition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-delay:time;正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。transition-delaytransition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。基本语法格式transition：propertydurationtiming-functiondelay;使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

例如：transition:border-radius5sease-in-out2s;transition无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。transition随堂练习（2）过渡举例1举例21、实现从左侧图片到右侧图片的过渡变化，过渡效果延时1s发生。2、上面例子只有一个过渡效果，如何同时有多个过渡效果应该怎么处理呢？下面例子同时采用过渡效果改变width、height、opacity的样式。动画5.3Animation动画@keyframes规定动画。animation所有动画属性的简写属性，除了animation-play-state属性。animation-name规定@keyframes动画的名称。animation-duration规定动画完成一个周期所花费的秒或毫秒。animation相关的属性CSS3的属性中有若干能够实现动画效果，通过设置其子属性，可以创造如移动、淡入淡出、改变颜色的效果。其子属性及功能描述如表所示：举例Animation动画animation-timing-function规定动画的速度曲线。animation-delay规定动画何时开始。animation-iteration-count规定动画被播放的次数。animation-direction规定动画是否在下一周期逆向地播放。animation-play-state规定动画是否正在运行或暂停。animation-fill-mode规定对象动画时间之外的状态。animation相关的属性举例属性值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。合法的值：0-100%from（与0%相同）to（与100%相同）css-styles必需。一个或多个合法的CSS样式属性。@keyframes规则基本语法格式@keyframes

animationname{keyframes-selector{css-styles;}}举例使div元素匀速向下移动：举例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。@keyframes规则案例演示为@keyframes动画规定名称值描述keyframename规定需要绑定到选择器的keyframe的名称。none规定无动画效果（可用于覆盖来自级联的动画）。animation-name基本语法格式animation-name:keyframename|none;定义动画完成一个周期所需要的时间，以秒或毫秒计。说明：必须明确规定animation-duration属性，否则时长为0，就不会播放动画。举例（animation-duration）值描述time规定完成动画所花费的时间。默认值是0，意味着没有动画效果。animation-duration基本语法格式animation-duration:time;animation-timing-function规定动画的速度曲线。速度曲线定义动画在每一动画周期中执行的节奏。速度曲线用于使变化更为平滑。举例（

animation-timing-function）值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier（贝塞尔曲线）函数中自己的值。可能的值是从0到1的数值。animation-timing-function基本语法格式animation-timing-function:value;随堂练习（3）动画对比一下不同速度曲线的效果。演示示例：速度曲线animation-delay属性定义动画何时开始。举例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允许负值，-2s使动画马上开始，但跳过前2秒进入动画。基本语法格式animation-delay:time;animation-iteration-count属性定义动画的播放次数值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。animation-iteration-count基本语法格式animation-iteration-count:n|infinite;animation-direction属性定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。注释：如果把动画设置为只播放一次，则该属性没有效果。举例（

animation-direction）animation-direction基本语法格式animation-direction:normal|alternate;animation-play-state属性定义动画的状态。举例（

animation-play-state）Running表示运动Paused表示暂停animation-play-state基本语法格式animation-play-state:running|paused;举例（animation-fill-mode）animation-fill-mode属性定义动画结束后的状态，none无forwards动画结束（to里面的所有样式）时的状态backwards动画开始（from里面的所有样式）时的状态both动画开始或者结束时的状态。animation-fill-mode基本语法格式animation-fill-mode:none|forwards|backwards|both;animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。注意：使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。完成animation练习animation基本语法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;随堂练习（4）动画实现动画，方块从左上角开始左→右→下→左，顺时针方向移动。同时背景色不断变化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：动画转换5.4转换（transform）属性用于元素的2D或3D转换，这个属性允许用户对元素进行旋转、缩放、平移、倾斜等。这些效果在CSS3之前都需要依赖Flash或JavaScript才能完成。现在，使用纯CSS3就可以实现这些变形效果，而无须加载额外的文件，这样极大地提高了网页开发者的工作效率，提高了页面的执行速度。转换transform属性允许对元素应用2D转换，常见2D转换：2D转换平移倾斜缩放旋转transform属性的默认值为none，适用于内联元素和块元素r，表示不进行变形。transform：none|transform-functionstansform-functions用于设置变形函数，可以是一个或多个变形函数列表。基本语法格式2D转换2D转换函数名描述参数说明rotate(angel)旋转元素angel是度数值，代表旋转角度skew(x-angel,y-angel)倾斜元素angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)沿着y轴倾斜元素2D转换的常用函数2D转换函数名描述参数说明scale(x,y)缩放元素，改变元素的高度和宽度代表缩放比例，取值包括正数、负数和小数scaleX(x)改变元素的宽度scaleY(y)改变元素的高度2D转换的常用函数2D转换2D转换的常用函数函数名描述参数说明translate(x,y)移动元素对象，基于x和y坐标重新定位元素元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数translateX(x)沿着x轴移动元素translateY(y)沿着y轴移动元素matrix(n,n,n,n,n,n)2D转换矩阵使用六个值的表示变形，所有变形的本质都是由矩阵完成的举例使用translate()函数能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数，分别用于定义X轴和Y轴的坐标。x-value是元素在水平方向上向右移动的距离；y-value是元素在垂直方向上向下移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。平移基本语法格式transform:translate(x-value,y-value);

transform:translate(200px,100px);-ms-transform:translate(200px,100px);/*IE9*/-moz-transform:translate(200px,100px);/*Firefox*/-webkit-transform:translate(200px,100px);/*Safari和Chrome*/-o-transform:translate(200px,100px);/*Opera*/举例平移举例scale()函数用于缩放元素。该函数包含两个参数，分别用来定义宽度和高度的缩放比例。x-axis和y-axis参数值可以是正数或负数。正数值表示基于指定的宽度和高度缩放元素；负数值是先翻转元素，再缩放元素（如文字被翻转）缩放基本语法格式transform:scale(x-axis,y-axis);transform:scale(0.9,-2);-ms-transform:scale(0.9,-2);/*IE9*/-moz-transform:scale(0.9,-2);/*Firefox*/-webkit-transform:scale(0.9,-2);/*Safari和Chrome*/-o-transform:scale(0.9,-2);/*Opera*/举例缩放虚框是div的原始大小，利用scale()函数将div的长宽缩放为长0.9倍、宽2倍，-2实现div在Y轴翻转，转换为灰色的div。为了便于比较，设置灰色的div外边距为100px。如图所示，新的div变为宽度180px、高度200px的翻转样式举例skew()函数能够让元素倾斜显示。该函数包含两个参数，分别用来定义X轴和Y轴坐标倾斜的角度。skew()函数可以将一个对象围绕着X轴和X轴按照一定的角度倾斜。参数x-angle表示相对于X轴倾斜的角度值；参数y-angle表示相对于Y轴倾斜的角度值。如果省略了第二个参数，则取默认值0。倾斜基本语法格式transform:skew(x-angle,y-angle);举例rotate()函数能够旋转指定的元素对象，主要在二维空间内进行操作参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针旋转；否则，按照逆时针旋转旋转基本语法格式transform:rotate(angle);编程实现2D转换