网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > 网页特效
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.网页内部做个标记,以便迅速定位.
.网页教学网构建DIV+CSS网页菜单代.
.一个不错的跑着改变字体颜色的特.
.非常简单的导航“菜块”.
.在页面中实现搜索功能,只要是页.
.页面上可以用鼠标拖动的图片.
.弹性效果的运动图片,网页特效.
.鼠标移动图片时的感应.
.多级动感的带下一级的导航菜单.
.标题栏字符随机显示.
.很Cool and Cool 的图形渐隐导航.
.CSS超酷网页导航实例!网页导航的.
.鼠标双击页面后,页面向右滚动.
.在页面中直接调用其它站点的页面.
.页面背景花瓣效果.
.模糊显示图片,当鼠标指向图片时.
.看看你的网站在世界的排名榜.
.好玩!仿DOS的HTML代码.
.对input框的分组选择功能的实现[.
.一定时间内会自动关闭的层.

特效代码:用CSS实现的一个字符显示效果

发表日期:2007-12-19


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页特效代码|/|---用CSS实现的一个字符显示效果</title>
<style>
body{ font-size:12px; line-height:22px;}
#info span{position:absolute;width:523px;height:275px;top:115px; left:10px;background-image: url(http://www.jscode.cn/Uploadfile/200682485616973.GIF);visibility: hidden;}
a:link,a:visited{cursor: default;}
a:active,a:hover{cursor:auto;}
#hi{visibility: hidden; height:1px; overflow:hidden;}
#w01 a:hover span,#w02 a:active span{background-position: 0px 0px; visibility: visible;}
#w02 a:hover span,#w03 a:active span{background-position: 0px -275px; visibility: visible;}
#w03 a:hover span,#w04 a:active span{background-position: 0px -550px;visibility: visible; }
#w04 a:hover span,#w05 a:active span{background-position: 0px -825px; visibility: visible;}
#w05 a:hover span,#w06 a:active span{background-position: 0px -1100px; visibility: visible;}
#w06 a:hover span,#w07 a:active span{background-position: 0px -1375px; visibility: visible;}
#w07 a:hover span,#w08 a:active span{background-position: 0px -1650px; visibility: visible;}
#w08 a:hover span,#w09 a:active span{background-position: 0px -1925px; visibility: visible;}
#w09 a:hover span,#w10 a:active span{background-position: 0px -2200px; visibility: visible;}
#w10 a:hover span,#w11 a:active span{background-position: 0px -2475px; visibility: visible;}
#w11 a:hover span,#w12 a:active span{background-position: 0px -2750px; visibility: visible;}
#w12 a:hover span,#w13 a:active span{background-position: 0px -3025px;visibility: visible; }

#info a{width:44px; height:100px;display:block; background:#cc0000; float:left;}
</style>
</head>
<body>
<div id="info">
  <div id="w01"><a href="/" target="_blank"><span></span></a></div>
  <div id="w02"><a href="/" target="_blank"><span></span></a></div>
  <div id="w03"><a href="/" target="_blank"><span></span></a></div>
  <div id="w04"><a href="/" target="_blank"><span></span></a></div>
  <div id="w05"><a href="/" target="_blank"><span></span></a></div>
  <div id="w06"><a href="/" target="_blank"><span></span></a></div>
  <div id="w07"><a href="/" target="_blank"><span></span></a></div>
  <div id="w08"><a href="/" target="_blank"><span></span></a></div>
  <div id="w09"><a href="/" target="_blank"><span></span></a></div>
  <div id="w10"><a href="/" target="_blank"><span></span></a></div>
  <div id="w11"><a href="/" target="_blank"><span></span></a></div>
  <div id="w12"><a href="/" target="_blank"><span></span></a></div>
</div>
<p>鼠标移到红色上边动一动</p>
<div id="hi"><img src="http://www.jscode.cn/Uploadfile/200682485616973.GIF" alt="" /></div>
</body>
</html>

上一篇:用CSS实现的一张图完成的导航条 人气:961
下一篇:CSS制作的阴影链接文字特效代码 人气:824
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐