很酷的放大镜的效果(CSS)
2009-06-08 18:47 Read:
在蓝色理想看到的一个非常酷的效果的代码,其实对于某些人来说已经是非常简单的了,但是对于我这种接触标准不是特别多的人来说,已经是非常非常酷的代码了。代码分两部分,第一部分是楼主自己提出的代码,很简单的几段代码就完成了,第二段代码是一个版主修改后的更加酷的代码。
研究一下,以后做菜单的时候用上,就不用想在鼠标触发的时候用图片背景了,这种就很好吗……
转自逍遥老鬼的BLOG: http://www.gengbing.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋体; text-align:center; text-decoration:none; border:1px solid orange; } a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px 宋体; color:#000; border:1px solid black; background:#eee; } --> </style> <div> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> |
经过发挥后的代码,这种字体不会有变化后那种被拉伸的感觉:
<style type="text/css">
<ul id="hovershow2"> |
全部评论:0 条 |