让人不得不佩服的CSS效果
让人不得不佩服的CSS效果
发布时间:2016-12-29 来源:查字典编辑
摘要:作者:eoe1.寻寻觅觅先要找个到好效果~才能抄如http://www.cssplay.co.uk/http://www.cssbeauty...

作者:eoe

1.寻寻觅觅

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

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

http://www.cssbeauty.com

等都能常常看到

今天不小心路过cssplay

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

好像好好玩滴样子

自己开起topstyle来试一下

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

2.自己动手~丰衣足食

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>a</title>

<styletype="text/css">

ul#hovershow{

list-style-type:none;

margin:50px;

float:left;

display:inline;

clear:both;

}

ul#hovershowli{

float:left;

display:inline;

width:64px;

height:64px;

margin:2px;

}

ul#hovershowlia{

display:block;width:64px;

height:64px;

}

ul#hovershowliaimg{

border:1px#666solid;

width:100%;

height:100%;

}

ul#hovershowlia:hover{

position:absolute;

z-index:100;

margin:-32px00-32px;

}

ul#hovershowlia:hoverimg{

width:128px;

height:128px;

border:1pxredsolid;

}

</style>

</head>

<body>

<ulid="hovershow">

<li><ahref="1#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/1.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="2#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/2.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="3#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/3.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="4#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/4.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="5#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/5.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="6#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/6.jpg" width="128"height="128"alt="test"/></a></li>

<li><ahref="7#"title="test"><imgsrc="http://www.rotui.net/lab/a/zoom/images/7.jpg" width="128"height="128"alt="test"/></a></li>

</ul>

</body>

</html>

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

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

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

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

3.取找补短

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

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

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

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

#enlargeliaimg{width:100%;height:100%;border:0;}

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

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

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

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

4.举一反三

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>a</title>

<styletype="text/css">

ul#hovershow2{

list-style-type:none;

margin:50px;

width:200px;

float:left;

display:inline;

clear:both;

}

ul#hovershow2li{

float:left;

display:inline;

width:20px;

height:20px;

margin:2px;

}

ul#hovershow2lia{

text-decoration:none;

display:block;

width:20px;

height:20px;

border:1pxredsolid;

background-color:White;

line-height:20px;

font-size:12px;

text-align:center;

}

ul#hovershow2lia:hover{

position:absolute;

width:40px;

height:40px;

line-height:40px;

font-size:32px;

z-index:100;

margin:-10px00-10px;

}

</style>

</head>

<body>

<ulid="hovershow2">

<li><ahref="1#"title="test"><span>1</span></a></li>

<li><ahref="2#"title="test"><span>2</span></a></li>

<li><ahref="3#"title="test"><span>3</span></a></li>

<li><ahref="4#"title="test"><span>4</span></a></li>

<li><ahref="5#"title="test"><span>5</span></a></li>

<li><ahref="6#"title="test"><span>6</span></a></li>

<li><ahref="7#"title="test"><span>7</span></a></li>

</ul>

</body>

</html>

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

好了更好玩~放弃IE了~

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>a</title>

<styletype="text/css">

ul#hovershow2{

list-style-type:none;

margin:50px;

width:200px;

float:left;

display:inline;

clear:both;

}

ul#hovershow2li{

float:left;

display:inline;

width:20px;

height:20px;

margin:2px;

}

ul#hovershow2lia{

text-decoration:none;

display:block;

width:20px;

height:20px;

border:1pxredsolid;

background-color:White;

line-height:20px;

font-size:12px;

text-align:center;

}

ul#hovershow2lia:hover{

position:absolute;

width:40px;

height:40px;

line-height:40px;

font-size:32px;

z-index:100;

margin:-10px00-10px;

}

ul#hovershow2li:hover+lia{

position:absolute;

width:30px;

height:30px;

line-height:30px;

font-size:24px;

z-index:99;

margin:-5px00-5px;

}

</style>

</head>

<body>

<ulid="hovershow2">

<li><ahref="1#"title="test"><span>1</span></a></li>

<li><ahref="2#"title="test"><span>2</span></a></li>

<li><ahref="3#"title="test"><span>3</span></a></li>

<li><ahref="4#"title="test"><span>4</span></a></li>

<li><ahref="5#"title="test"><span>5</span></a></li>

<li><ahref="6#"title="test"><span>6</span></a></li>

<li><ahref="7#"title="test"><span>7</span></a></li>

</ul>

</body>

</html>

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

效果不是很是很理想

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

也试过一边用原来的方法

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

也许这就是css本身所限

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类