电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
“CSS”网页制作动态效果二则
“CSS”网页制作动态效果二则
2005-12-30 19:02:13　　文/45IT收集 　　出处:电脑软硬件应用网 　　

鼠标变换

　　想不想在主页上实现这样的效果呢？鼠标移到“站点帮助”等字样上时，形状就变成求助的样子，当移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子。你要是不信的话，就先将下面这段代码拷到一个文本编辑器中，存成网页文件，然后我再给你解释代码的含义。

 
　　<html>

　　<head>

　　<title>cursor</title>

　　</head>

　　<body>

　　<p style=cursor:hand>手形</p>

　　<p style=cursor:move>移动标志</p>

　　<p style=cursor:wait>等待状态</p>

　　<p style=cursor:crosshair>定位指示</p>

　　<p style=cursor:help>寻求帮助</p>

　　</body>

　　</html> 

　　这段代码很简单，只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式分别设置它的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，鼠标的其他形状及“cursor”值。

　　阴影效果

　　这个带阴影的文字，它不是插入的图形，而是用“层叠式样式表单——CSS”用几行代码写出来的，这比插入图片可省空间多了。这个页面的源代码是这样的：

　　<html>

　　<head>

　　<title>shadow</title>

　　<style type=text/css>

　　<!--

　　p {position:absolute;

　　top:130;

　　left:50;

　　filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1);}

　　-->

　　</style>

　　</head>

　　<body>

　　<p style=font-size:48;font-weight:bold;color:red;>阴影效果</p>

　　</body>

　　</html> 

　　这个效果用到了CSS滤镜中的“DropShadow”属性，代码是：{ filter:DropShadow(Color=pink,OffX=4,OffY=4,positive=1)}，其中，“color”参数表示的是阴影的颜色，“OffX”和“OffY”表示的是阴影在X方向和Y方向上的偏移量，“positive”参数可以取值为“0”或“1”，取值为“0”时，表示为透明像素设置阴影，为“1”时，表示为不透明像素设置阴影。

　　使用“DropShadow”属性时，要特别注意的是，“position”属性的值一定要是“absolute”，否则阴影不能判断偏移的方向。为图形添加阴影的代码与为文字设置阴影的代码完全相同。


 

  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    网页特效代码:仿京东的商品分类导航…
    不能屏蔽的网页右下角窗口特效
    装载页面进度条代码
    链接特效之js做引用文章链接代码
    左右移动转换文字特效HTML代码解析
    网页页面实现自动刷新的3种代码
    网页特效代码:纯css下拉菜单列表
    JS特效代码:实现间歇无缝文字滚动特…
    文字滚动特效（兼容多浏览器）
    网页特效代码:JavaScript显示系统时…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号