CSS特效赏析

最新推荐文章于 2022-07-29 00:00:00 发布

weixin_34336526

最新推荐文章于 2022-07-29 00:00:00 发布

阅读量157

点赞数

文章标签： javascript ViewUI

　从现在开始，我将向您介绍一系列的CSS作品，这些大都是CSS与JavaScript结合起来产生的特效。您可以通过对这些特效的欣赏，进一步领略到CSS的强大功能。

　　1、动态改变样式

　　我们先来看一个较简单的特效，这里只是用到了属性和鼠标事件。

　　请把鼠标移到蓝色背景的文字下面。
　　我们使用“class”类属性来改变文档的样式。放大这段文本。

　　这个例子的代码是这样的：

<html>
　　<head>
　　<title>change style</title>
　　<style>
　　
　　</style>
　　</head>
　　<body>
　　<h1>动态改变样式</h1>
　　<p>请把鼠标移到蓝色背景的文字下面。</p>
　　<p>我们使用"class"类属性来改变文档的样式。
　　<span οnmοuseοver="this.className='bigchange'"
　　οnmοuseοut="this.classname='start'" class="start"
　　　　　　　　style="cursor:hand">
　　放大这段文本。 </span> </p> </body>
　　//*定义鼠标触发事件，当鼠标放上去的时候，区域内以bigchange类的格式显示，
　　当鼠标离开的时候，以start类显示*//
　　</html>

　　这个例子很简单，容易理解，就不多说什么了，下一节将向您介绍一个动态显示的例子。
2、动态可视化效果

　　这一节我们讲一个动态显示的例子，。

　　实现这种显示/隐藏效果的代码如下：

<html>
　　<head>
　　<title> dtksh </title>
　　<script>
　　//*定义一个函数，使bobo、sway两个类隐藏*//
　　</script>
　　</head>
　　<body>
　　<div id="bobo" style="visibility:hidden;position:absolute;
　　top:20;left:15; width:190;height:35;
　　background-color:rgb(62,174,128);
　　filter:alpha(opacity=60)"> </div>//*定义一个类bobo*//
　　div id="sway" style="visibility:hidden;color:rgb(177,63,174);
　　　position:absolute;top:20; width:190;height:100;
　　　margin-top:5;margin-left:5;">//*定义一个类sway*//
　　<p style="font-family:bailey;font-size:14pt;
　　font-weight:bold;text-align:center"> Sports is wonderful! </p>
　　</div> <p>//*写一行字，在sway类定义下*///
　　<img src="ss07049.jpg" οnmοuseοver="caption()"
　　οnmοuseοut="caption()"> </p>//*导入一张图片*//
　　<p class="p2" style="color:red">
　　　请把您的鼠标移动到图片上，然后再把鼠标从图片上挪开。
　　</p> </body>
　　</html>

　　下一节将向您介绍一个动态滤镜转换的例子。
3、动态滤镜显示

　　本节将向您介绍一个动态滤镜显示的例子中，在这个例子中您可以随意改变透明度的开始值、结束值和样式（style）。。

　　这个例子先是在<head>中加入了一段JavaScript语句，代码如下：

　　这段代码定义图片的透明度等于表单中输入的对应的透明度的值。myimage是一个类
，标识图片。它的CSS样式是这样定义的：

　　最后，在图片下方加入三个表单，分别对应输入初始透明度、结束透明度和样式值
，通过透明度的改变，使隐藏在图片下的文字显示出来。

　　下一节将向您介绍一种特殊的滤镜效果。

4、Blentrans属性

　　本节介绍一种特效，它应用到的是CSS中的混合转换滤镜blendtrans。请您先看一下
下面这个例子：

　　滤镜效果

　　使用方法 请单击这里使文字淡出，再次单击后可以使文字逐渐出现。

　　我们为这段文字加上的逐渐淡出的多媒体效果。

　　看到了吗？这是一种淡入淡出的效果。让我们来看一下而这种效果用到的转换属性
blendtrans的语法：

　　Filter：BlendTrans（duration=淡入或淡出的时间，以秒作单位)

　　我们看到了BlendTrans属性只有一个属性值duration，它指定了对象淡入淡出的时
间。

　　上面的例子的源代码如下所示：

<html>
　　<head>
　　<title> dhtml</title>
　　<style>
　　
　　</style> </head>
　　<body>
　　<h1>滤镜效果</h1>
　　<p><strong>使用方法</strong>
　　<span id="text4" οnclick="curobj=inner3;togglemultimedia()">
　　请单击<b><em style="color:red">这里</em></b>使文字淡出，
　　再次单击后可以使文字逐渐出现。</p>
　　<div id="inner3" style="width:100%;color:red; 　　　　　　　　　　　　
　　filter:blendtrans(duration=3)">
　　<p> 我们为这段文字加上的逐渐淡出的多媒体效果。</span></p> </div>
　　<script language="javascript">
　　
　　</script> </body>
　　</html>

　　除了文字外，图片是不是也能实现这种混合效果呢？答案是肯定的。下一节将向您
介绍图片的混合转换滤镜效果和显示转换滤镜效果。

5、RevealTrans属性

　　上一节我们介绍了混合转换滤镜的一个例子，本节我们来看一下RevealTrans属性
，RevealTrans属性提供了更加多变的转换效果。它的书写格式是这样的：

　　Filter:revealtrans(duration=转换的秒数，transition=转换的类型）

　　表达式中的transition参数的参数值有24中，以代号0-23来表示，分别代表24中显
示类型，具体的参数值列表如下图所示：

转换类型列表

　　下面的两个例子，一个是应用了上一节讲的blendtrans属性，一个是应用了本节所
说的revealtrans属性。

　　请点击下面的两幅图，看完效果后请点击IE的刷新按钮。

　　我们看到将revealtrans属性的transition参数值设置为23，为随机选取模式，显
示的是更为多变的效果。

　　下一节我将向您介绍一种发光特效。

6、动态Glow属性

　　还记得在教程中讲过的Glow滤镜属性吗？下面这个例子动态的把它演示出来。
　　请您点击下面的这段文字：

洪恩在线求知无限

　　怎么样，是不是有一种燃烧起来的感觉，反复点击文字将不断的发光。实现这种效果是很简单的，代码如下：

<html>
　　<head>
　　<title>css demo</title>
　　<script>
　　 </script>
　　</head>
　　<body text="pink">
　　<div id="myimg" οnclick="zap()"
　　style="font-family:行书体;font-size:54;height:200;color:#ff9900;
　　filter:glow(color=#9999ff,strength=20,enabled=0)
　　blendtrans(duration=2)"> <p>洪恩在线求知无限</p> </div>
　　</body>
　　</html>

　　我们看到代码中还应用到了blendtrans属性，使您在点击后字体的变化有一种淡化
的效果。
　　从下一节开始，我将向您介绍一些利用CSS-P的知识做出来的特效例子。　
7、显示和隐藏

　　我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏

显示- show 　　　　　隐藏- hide

　　我们来看一下这个例子的源代码：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body onLoad="init()">
　　<a href="javascript:showObject(block)">显示-show</A>
　　<a href="javascript:hideObject(block)">隐蔽-hide</A>
　　//*两个超链接调用javascript中的两个函数*//
　　<div id="blockDiv" style="position:absolute; left:50; top:100;
　　width:200; visibility:visible;">
　　<img src="ss01094.jpg" border=0> </DIV> //*导入一张图片*//
　　</body>
　　</html>

　　我们看到这段代码有一些不同于前面的例子的特点。其实CSS大部分动态的特效都是
DHTML的范畴。
　　也就是说，它们都是CSS与JavaScript结合起来实现的一种效果。另外，上面这个例
子还涉及到了IE和NS兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲
解。

　
　8、浏览器的兼容问题

　　首先我们来了解一下什么是CSS-P。
　　CSS-P是Cascading Style Sheets Positioning的缩写。从字面上我们可以把它理
解成是用来控制任何元素在页面上或窗口上的位置的。而具体跟CSS-P有关的属性包括以
下这些：
　　Position、Left、Top、Height、Width、Clip、Visibility、Z-index、
Background-color、Layer-background-color、Background-image和Layer-
background-image等。
　　我们看到这些属性在前面的教程中都已经介绍过了，实际上就是CSS定位方面的知识
。
　　谁都知道最常用的两个浏览器是IE和NetScape。我们如何让和JavaScript结合起来
应用的CSS在两个浏览器下都能正常显示呢？
　　我们针对上一节的例子来讲解，它是这样实现兼容的问题的：
　　ns4 = (document.layers)? true:false
　　//*document.layers是NetScape专用的，如果是这种形式，则为NS浏览器*//
　　ie4 = (document.all)? true:false
　　//*document.all是IE专用的，如果是以这种形式，则为IE浏览器*// 　
　　function init() { 　　
　　if (ns4) block = document.blockDiv
　　if (ie4) block = blockDiv.style }
　　//*这里定义了一个函数，初始化对象block，在NS中，对CSS对象的表示方法是：
　　　document.blockdiv.propertyname,这里blockdiv是您可以任意定义的名称。
　　　在IE中，表示方法是：blockdiv.style.propertyname。上面的代码是针对两
　　　种浏览器用不同的格式定义对象block，从而确保了在两种浏览器下都能正常显示
　　　。*//

　　下面我们就来看一个CSS-P与JavaScript结合起来的例子，您可以试一试在两种浏
览器下是否都能正常显示。

　　下一节将向您介绍一个移动的例子。

9、移动

　　通过下面这个例子，您可以把图片移动到指定的地方。

　　实现这个例子的代码是这样的：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body οnlοad="init()">
　　Check Values:
　　<a href="javascript:alert('X: ' + block.xpos)">横向位置</a>,
　　<a href="javascript:alert('Y: ' + block.ypos)">竖向位置</a> <br>
　　Visibility:
　　<a href="javascript:showObject(block)">显示</a>,
　　<a href="javascript:hideObject(block)">隐蔽</a> <br>
　　移动到 MoveTo:
　　<a href="javascript:moveTo(block,100,200)">(100,200)</a>,
　　<a href="javascript:moveTo(block,200,260)">(200,260)</a>,
　　<a href="javascript:moveTo(block,300,340)">(300,340)</a> <br>
　　相对移动 MoveBy:
　　<a href="javascript:moveBy(block,10,0)">(10,0)</a>,
　　<a href="javascript:moveBy(block,-10,0)">(-10,0)</a>,
　　<a href="javascript:moveBy(block,0,10)">(0,10)</a>,
　　<a href="javascript:moveBy(block,0,-10)">(0,-10)</a>
　　//*调用JavaScript中定义的函数*//
　　<div id="blockDiv" style="position:absolute; left:100; top:200;
　　width:30; visibility:visible;">
　　//*初始化一个区域的原始位置*//
　　<img src="ss05058.jpg" border=0> </div> </body>
　　</html>

　　下一节我将向您介绍一个滑动的例子。

10、滑动

　　上一节我们介绍了一个移动的例子，它可以使您随意放置对象的位置。那可不可以
让对象连续移动，从而实现一种动画的效果呢？我们来看个例子，。

　　怎么样，是不是有一种动起来的感觉，实现这种效果的代码如下：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body onLoad="init()">
　　<p> <a href="javascript:slide()">滑动</a>
　　<a href="javascript:moveTo(block,50,150)">返回</a>
　　<div id="blockDiv" STYLE="position:absolute; left:50; top:150;
　　width:400;"> //*定义对象的绝对位置*//
　　<img src="ss05058.jpg" width=250 height=150 border=0>
　　//*导入一张图片*// </div> </body>
　　</html>

　　本节我们讲述了一个滑动的例子，下一节将向您介绍一种用键盘控制对象移动、滑
动的方法。

11、键盘控制对象

　　本节我们将讲一下键盘控制对象移动的例子。
　　在前面讲过的使对象移动的例子，如果能用键盘来控制，将会大大加强您和电脑之
间的交互性。那么键盘控制怎么实现呢？
　　这需要涉及到事件问题。也就是说需要有一个键盘控制事件来激发键盘按下和松开的状态。这里用到的是“keydown”事件，这个事件的书写格式是这样的：

　　document.onkeydow=keydown

　　上面语句中的keydown是一个子程序，也就是说当您的浏览器读到这个子程序时，它就会知道您按下了哪一个键，从而作出相应的反应。我们下面来看一个例子：

　　请按任意键

　　当您按下任意键时，弹出了一个窗口，告诉您按下的是哪一个键，并且告诉您该键的内码是多少。实现这种键盘控制的代码如下：

<html>
　　<head>
　　<script language="javascript">
　　 </script>
　　//*子程序*//</head>
　　<body>
　　<p class="p2">请按任意键</p> </body>
　　</html>

　　上面的这个例子很简单是一个很简单的例子，，在这里您可以看到键盘控制图片移动的例子，您可以看到另外一种形式的移动。

　　好了，本节就讲到这里，下一节将向您介绍鼠标点击控制的例子。

12、鼠标控制

　　上一节我们讲了一个键盘控制的例子，本节我将向您介绍一个鼠标控制的例子。在
下面这个例子中，点击图片上方的超链接，图片就会移动。如果用鼠标一直按住链接不
放的话，图片就会持续移动下去。

　　实现这种效果的代码如下：

<html>
　　<head>
　　<script language="JavaScript">
　　
　　</script> </head>
　　<body bgcolor="#FFFFFF" onLoad="init()">
　　请您点击"移动"两个字，再一直按住鼠标左键看一看 <br>
　　<a href="javascript:void(null)"//*不要换网页*//
　　onMouseDown="block.active=true; slide(); return false;"
　　onMouseUp="block.active=false"
　　onMouseOut="block.active=false">移动</a>
　　//*设置鼠标的三种状态，当鼠标按下的时候，激活slide（）函数，开始滑动*//
　　<div id="blockDiv"
　　style="position:absolute; left:50; top:100; width:250;height:180">
　　<img src="ss07049.jpg" width=250 height=180 border=0>
　　</div>
　　</body>
　　</html>

　　其实上面这段代码和键盘控制的代码很相象，只是多了一个超链接的控制。
　　好了，下一节我将向您介绍动态控制对象可视区域的例子，听起来是不是很拗口，
没关系，很有意思的。

13、Clip属性的应用

　　上一节说到了动态可视区的调整，实际上就是Clip属性的应用。
　　Clipping的中文解释就是剪辑的意思，这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。
　　Clipping 的区域是一个矩形，而这个矩形的尺寸取决于于四个边的位置。
　　这四个边用 top, right, botton, left 来表示。
　　请注意：这四个边的位置是相对于对象的而不是相对于窗口的。
　　Clip属性的书写格式是这样的：

　　Clip rect（top，right，bottom，left）

　　在这里，top，right，bottom，left的值都是以像素pixels为单位的。

为了更好的理解相对于对象这个含义
，我们看一个例子，比如左面是一幅
285×185的图片，我们对它加入下面这
段代码：

style="clip:rect(0,200,100,0)"

这段代码使图片将以200×100的形式显
示。这是因为rect中规定的200，代表了图片的右端距离是200pixels，也就是图片的宽度是200pixels；同理， 100定义的则是图片的高度。这样图片就好象被剪辑了一样，将显示成右下图的样子：

clip后的图片　基本原理就介绍这么多，让我们来看两个例子
，一个是静态调整可视区域，一个是动态调整。

　　在这两个例子中，您可以点击对应的链接，得
到图片四条边的位置，可以点击链接使图片的可视
区按照规定的范围显示，还有您可以点击后，使图
片就像放电影一样，慢慢的展开。

　　哇，怎么这么多功能啊！看第一个例子吧。看第二个例子。

　　好了，本节介绍了Clip属性的应用实例，有关CSS-P的知识应用讲的差不多了，下
一节我将向您介绍一个动态字幕变换的例子。

14、动态文字变换

　　我们先来看下面这个效果：

洪恩在线

　　怎么样，这种文字渐淡显示的效果还可以吧，实现这种效果的代码如下：

　　好了，本节就讲到这里了，下一节将向您介绍一种动态改变页面样式的例子。

　15、动态改变页面样式

　　我们先来看一下下面这个例子吧，请您用鼠标点击表格中相应的部分看效果。

3:11:48P.M.

时钟颜色	时钟背景	时钟字体	字体尺寸	字体粗细

紫色	红色	无边饰	24pt	普通
白色	黄色	有边饰	36pt	粗体

　　通过点击表格中对应的部分，是表格上方的时钟样式发生了相应的改变。
　　其实，这种效果的实现很简单，那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的：

　　<p id="Clock" align="center"></p>
　　//*引入时钟*//
　　<table border="1" align="center">
　　<tr> <td class="p2">时钟颜色</td>
　　　　 <td class="p2">时钟背景</td>
　　　　 <td class="p2">时钟字体</td>
　　　　 <td class="p2">字体尺寸</td>
　　<td class="p2">字体粗细</td> </tr>
　　<tr> <td colspan="5" height="3"> </td> </tr>
　　<tr> <td class="p2">
　　<span οnmοuseοver="this.style.cursor='hand'"
　　　　　οnmοuseοut="this.style.cursor=default"
　　　　　οnclick="Clock.style.color='purple'">紫色</span>
　　</td>
　　//*设置鼠标事件，鼠标放上、离开、点击时的状态*//
　　<td class="p2">
　　<span οnmοuseοver="this.style.cursor='hand'"
　　　　　οnmοuseοut="this.style.cursor=default"
　　　　　οnclick="Clock.style.background='red'">红色</span>
　　</td>
　　……
　　//*省略号代表的代码和“紫色”、“红色”的定义是类似的*//

　　本节就介绍到这里，下一节将向您介绍一个动态时钟转换的例子。

　16、动态时钟控制

　　这个例子会让您看上去觉得眼花缭乱，在输入栏中输入不同的时间间隔会以不同的速度显示。
　　这里面主要用的是revealtrans滤镜属性，在每一个区域内都添加了revealtrans属性，再让它们调用onfilterchange函数。而输入时间间隔是靠javascript的onchange
事件实现的，下面我们把有关CSS的代码列出如下：

　　<body οnlοad="init()">
　　<span style="position:absolute;top:140;left:20;width:400;
　　　　　　　　 text-align:center; font-size:12pt">
　　<p>输入新的时间间隔。
　　<input id="speed" οnchange="updateTime()" size="20"> </span> </p>
　　//*定义输入文本框，调用updateTime（）函数*//
　　<div id="div1"
　　 style="position:absolute;top:20;left:20;width:100;height:100;
　　　　　　font-size:100;text-align:center;background-color:blue;
　　　　　　filter:revealtrans(transition=1,duration=1.5)"
　　　　　　onfilterchange="done(1)">
　　//*设置一个层，包括它的定位、字体和revealtrans滤镜属性，同时调用Done函数
　　　改变滤镜显示样式，达到动态的目的，下面的三个层的设置内容与这个类似*//
　　<p>A</p> </div>
　　<div id="div2"
　　style="position:absolute;top:20;left:140;width:100;height:100;
　　　　　 font-size: 100;text-align:center;background-color:blue;
　　　　　 filter:revealtrans(transition=2,duration=1.5)"
　　　　　 onfilterchange="done(2)">
　　 <p>A</p> </div>
　　<div id="div3"
　　style="position:absolute;top:20;left:260;width:100;height:100;
　　　　　 font- size:100;text-align:center;background-color:blue;
　　　　　filter:revealtrans(transition=3,duration=1.5)"
　　　　　 onfilterchange="done(3)">
　　 <p>A</p> </div>
　　<div id="div4"
　　 style="position:absolute;top:20;left:380;width:100;height:100;
　　　　　　font- size:100;text-align:center;background-color:blue;
　　　　　　filter:revealtrans(transition=4,duration=1.5)"
　　　　　　onfilterchange="done(4)">
　　 <p>A</p> </div>
　　</body>

　　好了，本节就介绍到这里，下一节将向您推荐一个倒计时的例子。
　17、倒计时

　　下面是一个有趣的例子，请。
　　当您点击显示的红色方块时，以一种随机的revealtrans滤镜样式进入数字倒计时，
当您刷新整个页面后，再点击红色方块时，又会以另一种revealtrans的滤镜样式进入倒计时。怎么样，是不是很有趣。这里应用了大量的script的函数，而在定义数字显示区域时，用了CSS定位的知识，代码如下：

　　<div id ="div1"
　　//*这里的div1是一个类选择符，在JavaScript的函数中调用*//
　　 style="position:absolute;top:20;left:20; width:100;height:100;
　　　　　　font-size:100;text-align:center; background-color:red;
　　　　　　filter:revealtrans(transition=23,duration=.01)"
　　　　　　//*定义了revealtrans滤镜属性，样式设为随机，变换时间设为.01*//
　　　　　　οnclick="Count()"
　　　　　　//*鼠标点击事件，触发Count（）函数*//
　　　　　　onfilterchange="Repeat()">
　　　　　　//*滤镜转换事件，触发Repeat（）函数*//
　　</div>

　　当然，您还可以查看实例的源代码，看一看javascript的代码是如何编写的。
　　好了，这一节就介绍到这里，下一节将向您介绍一个动态刷新的例子。
　18、动态刷新

　　我们先来看下面这个例子：

　　　　　　　　　　　　R G B

　　点击例子中的带颜色的RGB三个字母，分别表示将刷新后的文字变成对应的红、绿、蓝、三色。这个例子的实现代码如下：

<html>
　　<head>
　　<style TYPE="text/css">
　　 </style>
　　<script language="javascript">
　　 </script> </head>
　　<body οnlοad="initialize()">
　　<p class="textbox" align="center">
　　<dd><input TYPE="TEXT" NAME="traintext" Value="请输入您要刷新的文字"
　　size="20">
　　<input name="BTN1" TYPE="BUTTON" VALUE="刷新" οnclick="vandalize()">
　　<p><span STYLE="color:red;cursor:hand"
　　　　　　οnclick="cmb2.style.color='#ff0000'">R</span>
　　　　<span style="color:lime;cursor:hand"
　　　　　　 οnclick="cmb2.style.color='#00ff00'">G</span>
　　　　<span style="color:blue;cursor:hand"
　　　　　　 οnclick="cmb2.style.color='#0000ff'">B</span></p></dd></p>
　　<p id="cmb1" CLASS="graffiti1" align="center"></p>
　　<p id="cmb2" CLASS="garffiti2" align="center"></p></body>
　　</html>