让人不得不佩服的CSS效果

作者：eoe

1.寻寻觅觅

先要找个到好效果~才能抄

如http://www.cssplay.co.uk/

http://www.cssbeauty.com

等都能常常看到

今天不小心路过cssplay

http://www.cssplay.co.uk/ menus/magnifier2.html

好像好好玩滴样子

自己开起topstyle来试一下

建议大家看到好玩的样式~不要急着看他的CSS~没意义

2.自己动手~丰衣足食

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <title>a</title>

    <style type=”text/css”>

        ul#hovershow{

            list-style-type: none;

            margin: 50px;

            float: left;

            display: inline;

            clear: both;

        }

        ul#hovershow li{

            float: left;

            display: inline;

            width:64px;

            height: 64px;

            margin: 2px;

        }

        ul#hovershow li a {

            display: block;width:64px;

            height: 64px;

        }

        ul#hovershow li a img{

        border:1px #666 solid;

        width:100%;

            height:100%;

        }

        ul#hovershow li a:hover{

        position: absolute;

        z-index:100;

        margin: -32px 0 0 -32px;

        }

        ul#hovershow li a:hover img{

        width:128px;

        height:128px;

        border:1px red solid;

}

</style>

</head>

</body>

</html>

提示：你可以先修改部分代码再运行

做完自我感觉还不错~~~

主要就是a:hover position: absolute; margin 三个~

不过做后才发现~IE5的A失效了

3.取找补短

是时候看人家的CSS的~`虽然同样也是IE5的A失效

#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}

#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}

#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}

#enlarge li a img {width:100%; height:100%; border:0;}

#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}

提示：你可以先修改部分代码再运行

FT ~写得比人家多了一个定义~~

他的方法是用position:relative 配合left top 都是一样用负值来搞的~

4.举一反三

突然想到最近要写的擦车论坛~帖子下面的分页可以用这样来玩~

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

        ul#hovershow2{

            list-style-type: none;

            margin: 50px;

            width:200px;

            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;

        }

</style>

</head>

<body>

</body>

</html>

提示：你可以先修改部分代码再运行

好了更好玩~放弃IE了~

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

        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;

        }

ul#hovershow2 li:hover + li a{

        position: absolute;

        width:30px;

        height: 30px;

        line-height: 30px;

        font-size: 24px;

        z-index:99;

        margin: -5px 0 0 -5px;

        }

</style>

</head>

<body>

</body>

</html>

提示：你可以先修改部分代码再运行

效果不是很是很理想

试过把后面的A宽改成到刚好挡到左边的~可是看不到数字~不好看

也试过一边用原来的方法

一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图片~扩展性不好

也许这就是css本身所限

或许~用JS可以更简单的解决~““

微信