CSS特效赏析

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:30058

{}
 从现在开始,我将向您介绍一系列的CSS作品,这些大都是CSS与JavaScript结合起来产生的特效。您可以通过对这些特效的欣赏,进一步领略到CSS的强大功能。\r\n  1、动态改变样式\r\n  我们先来看一个较简单的特效,这里只是用到了属性和鼠标事件。 \r\n  请把鼠标移到蓝色背景的文字下面。  我们使用“class”类属性来改变文档的样式。 放大这段文本。\r\n  这个例子的代码是这样的:\r\n  ...

目录

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

  <b><font color="#336633">1、动态改变样式</font></b>

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

  <font color="#cc3399">请把鼠标移到蓝色背景的文字下面。</font>   我们使用“class”类属性来改变文档的样式。 <font color="#ffff00">放大这段文本。</font>

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

  <html>   <head>   <title>change style</title>   <style>   <!--   .bigchange{color:blue;font-weight:bolder;font-size:225%;   letter-spacing:4px;background:yellow;}   <font color="#cc3399">//*定义bigchange类的字体的颜色、粗细、大小,字间距,背景色*//</font>   .start{color:yellow;background:navy;}   <font color="#cc3399">//*定义start类的字体的颜色和背景色*//</font>    -->   </style>   </head>   <body>   

动态改变样式

   请把鼠标移到蓝色背景的文字下面。

   我们使用"class"类属性来改变文档的样式。      放大这段文本。
</body>   <font color="#cc3399">//定义鼠标触发事件,当鼠标放上去的时候,区域内以bigchange类的格式显示,   当鼠标离开的时候,以start类显示//</font>   </html>

  这个例子很简单,容易理解,就不多说什么了,下一节将向您介绍一个动态显示的例子。 <font color="#336633">2、动态可视化效果</font>

  这一节我们讲一个动态显示的例子,<a href="http://www.hongen.com/pc/homepage/csstx/sl/dtvisible.htm"> 链接</a>。

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

  <html>   <head>   <title> dtksh </title>   <script>   <!--   function caption() {   if(bobo.style.visibility=="hidden")    { bobo.style.visibility="" sway.style.visibility="" }   else{ bobo.style.visibility="hidden"       sway.style.visibility="hidden" }    }    --><font color="#cc3399">//定义一个函数,使bobo、sway两个类隐藏//</font>   </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><font color="#cc3399">//定义一个类bobo//</font>   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;"><font color="#cc3399">//定义一个类sway//</font>   <p style="font-family:bailey;font-size:14pt;   font-weight:bold;text-align:center"> Sports is wonderful!

  </div> <font color="#cc3399">//写一行字,在sway类定义下///</font>    <img src="ss07049.jpg" οnmοuseοver="caption()"   οnmοuseοut="caption()"> <font color="#cc3399">//导入一张图片//</font>   

   请把您的鼠标移动到图片上,然后再把鼠标从图片上挪开。    </body>   </html>

  下一节将向您介绍一个动态滤镜转换的例子。 <font color="#336633">3、动态滤镜显示</font>

  本节将向您介绍一个动态滤镜显示的例子中,在这个例子中您可以随意改变透明度的开始值、结束值和样式(style)。 <a href="http://www.hongen.com/pc/homepage/csstx/sl/dtfilter.htm"> 链接</a>。

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

  <script language="javascript">   <!--   function setfilter(){   myimage.filters.alpha.opacity=document.forms(0).opacity.value   myimage.filters.alpha.finishopacity=   document.forms(0).finishopacity.value   myimage.filters.alpha.style=document.forms(0).setstyle.value }   -->   </script>

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

   <img id="myimage" src="ss07075.jpg"   style="filter:alpha();position:absolute;top:10;left:0;">

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

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

<font color="#336633">4、Blentrans属性</font>

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

  滤镜效果

  使用方法 请单击<b><font color="#ff0000">这里</font></b>使文字淡出,再次单击后可以使文字逐渐出现。

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

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

  <font color="#336633">Filter:BlendTrans(duration=淡入或淡出的时间,以秒作单位)</font>

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

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

  <html>   <head>   <title> dhtml</title>   <style>   <!--   em{color:red;cursor:hand;font-size:14pt}   -->   </style> </head>   <body>   

滤镜效果

   <strong>使用方法</strong>      请单击<b><em style="color:red">这里</em></b>使文字淡出,   再次单击后可以使文字逐渐出现。

  <div id="inner3" style="width:100%;color:red;                filter:blendtrans(duration=3)">    我们为这段文字加上的逐渐淡出的多媒体效果。 </div>   <script language="javascript">   <!--   var curobj;   function togglemultimedia(){   if (curobj.filters(0).status==2){ curobj.filters(0).stop();   if (curobj.style.visibility=="hidden")   curobj.style.visibility="visible";   else curobj.style.visibility="hidden";                    window.settimeout("togglemultimedia()",1); }   curobj.filters(0).apply();   if (curobj.style.visibility=="hidden")                    curobj.style.visibility="visible";   else curobj.style.visibility="hidden"; curobj.filters(0).play(); }   -->   </script> </body>   </html>

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

<font color="#336633">5、RevealTrans属性</font>

<font color="#336633">  </font>上一节我们介绍了混合转换滤镜的一个例子,本节我们来看一下RevealTrans属性 ,RevealTrans属性提供了更加多变的转换效果。它的书写格式是这样的:

  <font color="#336633">Filter:revealtrans(duration=转换的秒数,transition=转换的类型)</font>

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

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

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

   ss01094.jpg     ss01094.jpg

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

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

<font color="#336633">6、动态Glow属性</font>

<font color="#336633">  </font>还记得在教程中讲过的Glow滤镜属性吗?下面这个例子动态的把它演示出来。   请您点击下面的这段文字:

洪恩在线 求知无限

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

  <html>   <head>   <title>css demo</title>   <script>   <!--   function zap() {   if(myimg.filters.glow.enabled==1) {myimg.filters.glow.enabled=0; }   if(myimg.filters.blendtrans.status==0)   {myimg.filters.blendtrans.apply();   myimg.filters.glow.enabled=1; myimg.filters.blendtrans.play(); } }   --> </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)"> 洪恩在线 求知无限 </div>   </body>   </html>

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

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

<font color="#002c99">显示- show</font>      <font color="#002c99">隐藏- hide</font>

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

  <html>   <head>   <script language="JavaScript">   <!--   ns4 = (document.layers)? true:false   ie4 = (document.all)? true:false   function init() {   if (ns4) block = document.blockDiv   if (ie4) block = blockDiv.style }<font color="#cc3399">//*设置对象block*//</font>   function showObject(obj) {   if (ns4) obj.visibility = "show"   else if (ie4) obj.visibility = "visible" }   function hideObject(obj) {   if (ns4) obj.visibility = "hide"   else if (ie4) obj.visibility = "hidden" }   <font color="#cc3399">//*定义两个函数分别用来显示、隐藏对象block*//</font>   //--> </script> </head>   <body onLoad="init()">   <a href="javascript:showObject(block)">显示-show</A>   <a href="javascript:hideObject(block)">隐蔽-hide</A>   <font color="#cc3399">//两个超链接调用javascript中的两个函数//</font>   <div id="blockDiv" style="position:absolute; left:50; top:100;   width:200; visibility:visible;">    </DIV> <font color="#cc3399">//导入一张图片//</font>   </body>   </html>

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

   <b><font color="#336633">8、浏览器的兼容问题</font></b>

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

  下面我们就来看一个CSS-P与JavaScript结合起来的例子,您可以试一试在两种浏 览器下是否都能正常显示。 <a href="http://www.hongen.com/pc/homepage/csstx/sl/jianrong.htm"> 链接</a>

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

<font color="#336633">9、移动</font>

  通过下面这个例子,您可以把图片移动到指定的地方。<a href="http://www.hongen.com/pc/homepage/csstx/sl/yidong.htm"> 链接</a>

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

  <html>   <head>   <script language="JavaScript">   <!--   ns4 = (document.layers)? true:false   ie4 = (document.all)? true:false   function init() {   if (ns4) block = document.blockDiv   if (ie4) block = blockDiv.style   block.xpos = parseInt(block.left)   block.ypos = parseInt(block.top) }   <font color="#cc3399">//*定义初始函数,两种浏览器下的对象的横向、竖向坐标分别对应于对象相对于窗    口的左端、顶端的位置*//</font>   function moveTo(obj,x,y) {   obj.xpos = x   obj.left = obj.xpos   obj.ypos = y obj.top = obj.ypos }   <font color="#cc3399">//*定义绝对移动函数*//</font>   function moveBy(obj,x,y) {   obj.xpos += x   obj.left = obj.xpos   obj.ypos += y   obj.top = obj.ypos }   <font color="#cc3399">//*定义相对移动函数*//</font>   function showObject(obj) {   if (ns4) obj.visibility = "show"   else if (ie4) obj.visibility = "visible" }   function hideObject(obj) {   if (ns4) obj.visibility = "hide"   else if (ie4) obj.visibility = "hidden" }   <font color="#cc3399">//*定义显示、隐藏函数*//</font>   //--> </script> </head>   <body οnlοad="init()">   Check Values:   <a href="javascript:alert('X: ' + block.xpos)">横向位置</a>,   <a href="javascript:alert('Y: ' + block.ypos)">竖向位置</a>

  Visibility:   <a href="javascript:showObject(block)">显示</a>,   <a href="javascript:hideObject(block)">隐蔽</a>

  移动到 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>

  相对移动 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>   <font color="#cc3399">//调用JavaScript中定义的函数//</font>   <div id="blockDiv" style="position:absolute; left:100; top:200;   width:30; visibility:visible;">   <font color="#cc3399">//初始化一个区域的原始位置//</font>    </div> </body>   </html>

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

<font color="#336633">10、滑动</font>

  上一节我们介绍了一个移动的例子,它可以使您随意放置对象的位置。那可不可以 让对象连续移动,从而实现一种动画的效果呢?我们来看个例子,<a href="http://www.hongen.com/pc/homepage/csstx/sl/huadong.htm"> 链接</a>。

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

  <html>   <head>   <script language="JavaScript">   <!--   ns4 = (document.layers)? true:false   ie4 = (document.all)? true:false   function init() {   if (ns4) block = document.blockDiv   if (ie4) block = blockDiv.style   block.xpos = parseInt(block.left) }   <font color="#cc3399">//*在两种浏览器下定义对象block,横坐标等于对象距窗口左端的长度*//</font>   function slide() {   if (block.xpos < 500) {   block.xpos += 5   block.left = block.xpos   setTimeout("slide()",10) }    } <font color="#cc3399">//*定义一个滑动函数,当横坐标小于500时,对象距离左端的坐标值,每加5改   变一次,后面是一个定时语句*//</font>   function moveTo(obj,x,y) {   obj.xpos = x   obj.ypos = y   obj.left = obj.xpos   obj.top = obj.ypos }   <font color="#cc3399">//*定义绝对移动函数,使对象的横坐标等于距离窗口左端的长度,纵坐标等于距离   窗口顶端的长度*//</font>   //--> </script> </head>   <body onLoad="init()">    <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;"> <font color="#cc3399">//定义对象的绝对位置//</font>      <font color="#cc3399">//导入一张图片//</font> </div> </body>   </html>

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

<font color="#336633">11、键盘控制对象</font>

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

  <font color="#336633">document.onkeydow=keydown</font>

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

<font color="#cc3399"><b>  </b></font>

<font color="#cc3399"><b>  请按任意键</b></font>

<b><font color="#cc3399">  </font></b>当您按下任意键时,弹出了一个窗口,告诉您按下的是哪一个键,并且告诉您该键的内码是多少。实现这种键盘控制的代码如下:

  <html>   <head>   <script language="javascript">   <!--   function keyDown() {   var keycode = event.keyCode   var realkey = String.fromCharCode(event.keyCode)   alert("keycode: " + keycode + "\nrealkey: " + realkey) }   document.onkeydown = keyDown    //--> </script>   //子程序//</head>   <body>    请按任意键 </body>   </html>

  上面的这个例子很简单是一个很简单的例子,<b><a href="http://www.hongen.com/pc/homepage/csstx/sl/jianpan3.htm"> 链接</a></b>,在这里您可以看到键盘控制图片移动的例子,<b><a href="http://www.hongen.com/pc/homepage/csstx/sl/jianpan2.htm"> 链接</a></b> 您可以看到另外一种形式的移动。

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

<font color="#336633">12、鼠标控制</font>

  上一节我们讲了一个键盘控制的例子,本节我将向您介绍一个鼠标控制的例子。在 下面这个例子中,点击图片上方的超链接,图片就会移动。如果用鼠标一直按住链接不 放的话,图片就会持续移动下去。<a href="http://www.hongen.com/pc/homepage/csstx/sl/shubiaocontrol.htm"> 链接</a>

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

  <html>   <head>   <script language="JavaScript">   <!--   ns4 = (document.layers)? true:false   ie4 = (document.all)? true:false   function init() {   if (ns4) block = document.blockDiv   if (ie4) block = blockDiv.style   block.xpos = parseInt(block.left)   block.active = false }<font color="#cc3399">//*兼容两种浏览器*//</font>   function slide() {   if (block.active) {   block.xpos += 5   block.left = block.xpos   setTimeout("slide()",30) }   } //-->   </script> </head>   <body bgcolor="#FFFFFF" onLoad="init()">   请您点击"移动"两个字,再一直按住鼠标左键看一看

  <a href="javascript:void(null)"<font color="#cc3399">//不要换网页//</font>   onMouseDown="block.active=true; slide(); return false;"   onMouseUp="block.active=false"   onMouseOut="block.active=false">移动</a>   <font color="#cc3399">//设置鼠标的三种状态,当鼠标按下的时候,激活slide()函数,开始滑动//</font>   <div id="blockDiv"   style="position:absolute; left:50; top:100; width:250;height:180">      </div>   </body>   </html>

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

<font color="#336633">13、Clip属性的应用</font>

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

  <font color="#336633">Clip rect(top,right,bottom,left)</font>

  在这里,top,right,bottom,left的值都是以像素pixels为单位的。 原图为了更好的理解相对于对象这个含义 ,我们看一个例子,比如左面是一幅 285×185的图片,我们对它加入下面这 段代码:

<font color="#336633">style="clip:rect(0,200,100,0)" </font>

这段代码使图片将以200×100的形式显 示。这是因为rect中规定的200,代表了图片的右端距离是200pixels,也就 是图片的宽度是200pixels;同理, 100定义的则是图片的高度。这样图片就 好象被剪辑了一样,将显示成右下图的样子: clip后的图片  基本原理就介绍这么多,让我们来看两个例子 ,一个是静态调整可视区域,一个是动态调整。

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

  哇,怎么这么多功能啊! <a href="http://www.hongen.com/pc/homepage/csstx/sl/clip1.htm"> 链接</a>看第一个例子吧。<a href="http://www.hongen.com/pc/homepage/csstx/sl/clip2.htm"> 链接</a>看第二个例子。

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

<font color="#336633">14、动态文字变换</font>

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

洪恩在线

  

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

  <html>   <head>   <script>   <!--   function HelpArray(len){this.length=len }   HelpText= new HelpArray(5)   HelpText[0]="北京金洪恩电脑有限公司"   HelpText[1]="洪恩在线"   HelpText[2]="求知无限"   HelpText[3]="十二亿中国人的网上大学"   HelpText[4]="http://www.hongen.com"   ScriptText=new HelpArray(5)   <font color="#cc3399">//*定义文本数组,一共是五段文本*// </font>   var i = -1   function playHelp() {   if (i==4) { i=0 }   else { i++ }   div1.filters[0].apply()   div1.innerText=HelpText[i]   div1.filters[0].play()   mytimeout=setTimeout("playHelp()",2500)}   <font color="#cc3399">//*定义play函数,并且设置了时间间隔*//</font>   -->   </script>   <style> <!--   #div1{position:absolute;top:20;left:20;width:480;height:200;      font-family:行书体; color:red;font-size:40;      font-weight:bold;text-align:center;      filter:revealtrans(transition=12,duration=2) }   <font color="#cc3399">//*设置显示转换滤镜*//</font>        -->   </style> </head>   <body οnlοad="playHelp()">   <div id="div1" οnlοad="playHelp()"> </div>   </body>   </html>

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

 <b><font color="#336633">15、动态改变页面样式</font></b>

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

3:11:48P.M.

<table> <tbody> <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">紫色 </td> <td class="p2">红色 </td> <td class="p2">无边饰 </td> <td class="p2">24pt </td> <td class="p2">普通 </td> </tr> <tr> <td class="p2">白色 </td> <td class="p2">黄色 </td> <td class="p2">有边饰 </td> <td class="p2">36pt </td> <td class="p2">粗体 </td> </tr> </tbody> </table>nn
  通过点击表格中对应的部分,是表格上方的时钟样式发生了相应的改变。   其实,这种效果的实现很简单,那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的:

  

  <font color="#cc3399">//引入时钟//</font>   <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">   紫色   </td>   <font color="#cc3399">//设置鼠标事件,鼠标放上、离开、点击时的状态//</font>   <td class="p2">   红色   </td>   ……   <font color="#cc3399">//省略号代表的代码和“紫色”、“红色”的定义是类似的//</font>

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

 <b><font color="#336633">16、动态时钟控制</font></b>

  这个例子会让您看上去觉得眼花缭乱,在输入栏中输入不同的时间间隔会以不同的速度显示。<a href="http://www.hongen.com/pc/homepage/csstx/sl/dttimecontrol.htm"> 链接</a>   这里面主要用的是revealtrans滤镜属性,在每一个区域内都添加了revealtrans属性,再让它们调用onfilterchange函数。而输入时间间隔是靠javascript的onchange 事件实现的,下面我们把有关CSS的代码列出如下:

  <body οnlοad="init()">       输入新的时间间隔。   <input id="speed" οnchange="updateTime()" size="20">

  <font color="#cc3399">//定义输入文本框,调用updateTime()函数//</font>   <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)">   <font color="#cc3399">//设置一个层,包括它的定位、字体和revealtrans滤镜属性,同时调用Done函数    改变滤镜显示样式,达到动态的目的,下面的三个层的设置内容与这个类似//</font>    A </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)">    A </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)">    A </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)">    A </div>   </body>

   好了,本节就介绍到这里,下一节将向您推荐一个倒计时的例子。  <b><font color="#336633">17、倒计时</font></b>

  下面是一个有趣的例子,请<a href="http://www.hongen.com/pc/homepage/csstx/sl/djs.htm"> l链接</a>。   当您点击显示的红色方块时,以一种随机的revealtrans滤镜样式进入数字倒计时, 当您刷新整个页面后,再点击红色方块时,又会以另一种revealtrans的滤镜样式进入倒计时。怎么样,是不是很有趣。这里应用了大量的script的函数,而在定义数字显示区域时,用了CSS定位的知识,代码如下:

  <div id ="div1"   <font color="#cc3399">//这里的div1是一个类选择符,在JavaScript的函数中调用// </font>    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)"       <font color="#cc3399">//定义了revealtrans滤镜属性,样式设为随机,变换时间设为.01//</font>       οnclick="Count()"       <font color="#cc3399">//鼠标点击事件,触发Count()函数//</font>       onfilterchange="Repeat()">       <font color="#cc3399">//滤镜转换事件,触发Repeat()函数//</font>   </div>

  当然,您还可以查看实例的源代码,看一看javascript的代码是如何编写的。   好了,这一节就介绍到这里,下一节将向您介绍一个动态刷新的例子。  <b><font color="#336633">18、动态刷新</font></b>

<b><font color="#336633">  </font></b>我们先来看下面这个例子:

              R G B

 

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

  <html>   <head>   <style TYPE="text/css">   <!--   textarea{font:georgia}   input{font-size:15px"georgia";   background:yellow;color:purple;height:23px;}   p.graffiti1{font-family:arial;font-size:30px;color:black;}   p.graffiti2{font-family:arial;font-size:30px;color:white;}   p.textbox{font-family:georgia;font-size:26px;color:purple}   span{font-family:"wide latin";font-size:36px;}   --> </style>   <script language="javascript">   <!--   function initialize(){   document.all.cmb1.innerText=traintext.value;   document.all.cmb2.innerText=traintext.value;}   function vandalize()   {var s=traintext.value; if (s.length>15)   {alert("please use 15 characters or less"); traintext.value="";}   else{document.all.cmb1.innerText=traintext.value;   document.all.cmb2.innerText=traintext.value;}}   //--> </script> </head>   <body οnlοad="initialize()">   

  <dd><input TYPE="TEXT" NAME="traintext" Value="请输入您要刷新的文字"   size="20">   <input name="BTN1" TYPE="BUTTON" VALUE="刷新" οnclick="vandalize()">    R     G     B

</dd>

  

  

</body>   </html>

  如果您看过了我们前面的讲解,理解这段代码并不难。您自己看一看吧,或者您动手试一试,今天就讲到这里了。   现在,CSS特效赏析的栏目就告一段落了,有关CSS的其他应用,我们会在以后推出的DHTML教程中再做讲解。对于教程本身,希望广大网友多提宝贵的意见,谢谢。

转载于:https://www.cnblogs.com/wayne-ivan/archive/2007/06/04/770750.html

原文地址:https://blog.csdn.net/weixin_30381793/article/details/96237707?ops_request_misc=&request_id=8f87bc24dd5e4bf18317c87e76cf4065&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-11-96237707-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/4c753b4a6c0f4be4920abdce052fdf7c

打赏作者

本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复