《最新在网页中加及动态效果精品课件》由会员分享，可在线阅读，更多相关《最新在网页中加及动态效果精品课件（22页珍藏版）》请在金锄头文库上搜索。
1、在网页中加及动态效果在网页中加及动态效果什么是CSSnCSS的基本概念qCSS（Cascading Style Sheet）就是层叠样式表。是一种可以精确控制页面元素样式的技术。qCSS样式表的主要优点是提供便利的更新功能；通过使用CSS可以实现改变一个文件就可以自动更新数百个使用该样式的网页外观。 nCSS有以下特点 q（1）将格式和结构分离qHTML语言定义了网页的结构和各对象的功能，而层叠样式表通过将定义结构的部分和定义格式的部分分离，使我们能够对页面的布局施加更多的控制。q（2）很强的控制页面布局的能力qHTML语言对网页对象的控制很有限，如精确定位、行间距、字间距等，这些都可以通过C
2、SS完成。q（3）同时更新许多网页，比以前更快更容易q（4）制作体积更小、下载更快的网页样式定义对话框分类参数方框n方框q“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置 n选项q宽和高、垂直对齐、文本对齐、文字缩进、空格、显示样式定义对话框分类参数边框n边框q“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式） n选项q样式、宽度、颜色样式定义对话框分类参数列表n列表q“列表”类别为列表标签定义列表设置（如项目符号大小和类型） n选项q类型、项目符号图像、位置样式定义对话框分类参数定位n定位q“定位”类别确定与选定的 CSS 样式相关的内容在页面上的定位方式 n
3、选项q类型n绝对 使用“定位”框中输入的、相对于最近的绝对或相对定位上级元素的坐标来放置内容n相对 使用“定位”框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块n固定 使用“定位”框中输入的坐标（相对于浏览器的左上角）来放置内容n静态 将内容放在其在文本流中的位置这是所有可定位的 HTML 元素的默认位置 q显示、Z轴、溢出、宽、高n对应层的内容q定位n指定内容块的位置和大小样式定义对话框分类参数扩展n扩展q“扩展”样式属性包括滤镜、分页和指针选项 n选项q分页n在打印期间在样式所控制的对象之前或者之后强行分页q光标n当指针位于样式所控制的对象上时改变指针图像q过滤器n对样式所控
4、制的对象应用特殊效果（包括模糊和反转）扩展光标ncrosshair十字光标ntext文本nwait忙ndefault定义nhelp帮助ne-resize、w-resize水平方向尺寸nne-resize、sw-resize东北方向尺寸nn-resize、s-resize垂直方向尺寸nnw-resize、se-resize西北方向尺寸nauto自动nHand手型ninherit扩展过滤器（又称css滤镜）n“alpha”滤镜：这个名字，在flash和photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素
5、的透明度。nblendtrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。nblur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以把blur滤镜加载到图片上，能达到用图象处理软件制作的效果。n“dropshadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。ncss的无参数滤镜共有六个（fliph、flipv、invert、xray、gray和light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或
6、图片翻转、获得图片的“底片”效果，甚至可以制作图片的“x光片”效果。nglow滤镜：使对象的边缘就产生类似发光的效果，glow”滤镜制作这种效果操作非常简便。nmask滤镜：可以为网页上的元件对象作出一个矩形遮罩效果。nwave滤镜：它的作用是把对象按照垂直的波形样式扭曲的特殊效果。nlight滤镜：能产生一个模拟光源的效果，配合使用一些简单的javascrpt，使对象产生奇特光照的效果。nrevealtrans动态滤镜：是一个神奇的滤镜，它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。扩展过滤器（又称css滤镜）n1.Alpha滤镜n
7、语法:nAlpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)n代码：nCSS滤镜实例n从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：nopacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明； style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。n而width:100%则表示参与渐变的对象的宽度，通常
8、都设置为100%。扩展过滤器（又称css滤镜）n2. Blur滤镜n语法:nBlur(Add=?, Direction=?, Strength=?)nMotion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。n代码：nCSS滤镜实例n3.Chroma 滤镜n语法:nfilter:chroma(color=color)n使用”Chroma属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要
9、透明的颜色。扩展过滤器（又称css滤镜）n4.Drop Shadow滤镜n语法:nDropShadow(Color=?, OffX=?, OffY=?, Positive=?)nDrop Shadow滤镜主要产生重叠效果。其属性为：ncolor属性：设置影子文本的颜色；noffX和offY属性：影子文本下落的位移值；nPositive属性：指定透明象素阴影，布尔型，0为是，1为否。n代码：nCSS滤镜实例n5.Flip滤镜nFlip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。n代码：nCSS滤镜实例nCSS滤镜实例扩展过滤器（又称css滤
10、镜）n6.Glow滤镜 n语法:nGlow(Color=?, Strength=?)nGlow滤镜生成一种光晕效果。属性：ncolor属性：光晕颜色；strength：光晕的厚度。n代码：nCSS滤镜实例n7.Light 滤镜n这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT滤镜属性，那么就可以调用它的“方法(Method)来设置或者改变属性。“LIGHT可用的方法有：nAddAmbient 加入包围的光源 nAddCone 加入锥形光源 nAddPoint 加入点光源 nChangcolor 改变光的颜色 nChangstrength 改变光源的强度 nClear 清除所有的光源 n
11、MoveLight 移动光源 n可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。扩展过滤器（又称css滤镜）n8.Shadow滤镜n语法:nShadow(Color=?, Direction=?)n与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：ncolor属性：阴影颜色；ndirection属性：阴影角度，值取0至360度。n代码：nCSS滤镜实例n9.Wave滤镜n语法:nWave(A
12、dd=?, Freq=?, LightStrength=?, Phase=?, Strength=?)n此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：nadd属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；nfreq属性：决定显示的频率，即应出现多少个波形；nphrase属性：决定波形的形状，值取0至360之间；nstrength属性：决定波形的振幅。n代码：nCSS滤镜实例n10.Gray ,Invert,Xray 滤镜n语法:nfilter:gray ,filter:invert,filter:xraynGray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。n代码：n提示：CSS滤镜还经常用来修饰图像。比如用Flip滤镜，就可以使图像倒过来显示。最后请注意：要使用CSS滤镜，只有在HTML编辑模式下编辑发布才有效果。实训内容n练习今天所讲内容n设置类样式q设置类型、背景、区块、方框、边框、定位、扩展q应用于文本、图像、表格、层n本次练习，下次统一检查
