WEB标准化当前位置 / 首页  /  文章中心  /  WEB标准化

很酷的放大镜的效果(CSS)

上一篇下一篇artery2009-06-085641

在蓝色理想看到的一个非常酷的效果的代码,其实对于某些人来说已经是非常简单的了,但是对于我这种接触标准不是特别多的人来说,已经是非常非常酷的代码了。代码分两部分,第一部分是楼主自己提出的代码,很简单的几段代码就完成了,第二段代码是一个版主修改后的更加酷的代码。

研究一下,以后做菜单的时候用上,就不用想在鼠标触发的时候用图片背景了,这种就很好吗……

转自逍遥老鬼的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#hovershow2{
                 list-style-type: none;
                 margin: 50px;
                 width:440px;
                 float: left;
                 display: inline;
                 clear: both;
             }
             ul#hovershow2 li{
                 float: left;
                 display: inline;
                 width:20px;
                 height: 20px;
                 margin: 2px;
                            
             }
             ul#hovershow2 li a {
                 text-decoration: none;
                 display: block;
                 width:20px;
                 height:20px;
                 border:1px red solid;
                 background-color: White;
                 line-height: 20px;
                 font-size: 12px;
                 text-align: center;
             }


             ul#hovershow2 li a:hover{
             position: absolute;
             width:40px;
             height: 40px;
             line-height: 40px;
             font-size: 32px;
             z-index:100;
             margin: -10px 0 0 -10px;font-family:华文行楷;
             }
            
     </style>

 

<ul id="hovershow2">
     <li><a href="1#" title="test"><span>枯</span></a></li>
     <li><a href="2#" title="test"><span>藤</span></a></li>
     <li><a href="3#" title="test"><span>老</span></a></li>
     <li><a href="4#" title="test"><span>树</span></a></li>
     <li><a href="5#" title="test"><span>昏</span></a></li>
     <li><a href="6#" title="test"><span>鸦</span></a></li>
     <li><a href="7#" title="test"><span>古</span></a></li>
     <li><a href="1#" title="test"><span>道</span></a></li>
     <li><a href="2#" title="test"><span>西</span></a></li>
     <li><a href="3#" title="test"><span>风</span></a></li>
     <li><a href="4#" title="test"><span>瘦</span></a></li>
     <li><a href="5#" title="test"><span>马</span></a></li>
     <li><a href="6#" title="test"><span>小</span></a></li>
     <li><a href="7#" title="test"><span>桥</span></a></li>
     <li><a href="4#" title="test"><span>流</span></a></li>
     <li><a href="5#" title="test"><span>水</span></a></li>
     <li><a href="6#" title="test"><span>人</span></a></li>
     <li><a href="7#" title="test"><span>家</span></a></li>
</ul>

上一篇下一篇
发表评论 共有 条评论
用户名(游客选填): 密码: 匿名发表   验证码:
 

[ ARTERY.cn 随机图赏 ]

男子裸身破冰救爱犬
喵星人玩滑板,超帅!!
iPhone6分辨率与适配
移动设计,交互性为王
设计趋势:网页设计中的幽灵按钮
解决汉堡图标问题