CSS effects that make people admire_Experience exchange

Author: eoe
1. Xunxunmimi
You must first find a good effect~ before copying
such as http://www.cssplay.co.uk/
http://www.cssbeauty.com A>
You can often see it

I accidentally passed by cssplay today
http:/ /www.cssplay.co.uk/ menus/magnifier2.html
It looks like a lot of fun

Open topstyle and give it a try
I suggest you see the fun style~ Don’t rush to look at his CSS~it’s meaningless

2. Do it yourself~have enough food and clothing
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

" target=_blank>http://www.w3.org/1999/xhtml">

    
    

    
• http://www.rotui.net/lab/a/zoom/images/1.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/2.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/3.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/4.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/5.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/6.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

    
• http://www.rotui.net/lab/a/zoom/images/7.jpg"  width="128"  style="max-width:90%" alt="CSS effects that make people admire_Experience exchange" />

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

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

主要就是a:hover position: absolute; margin 三个~
不过做后才发现~IE5的A失效了

3.Make up for the shortcomings
It’s time to look at other people’s CSS~`Although it is also invalid in IE5’s 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;}
Tip: You can modify part of the code before running

FT ~Write It has one more definition than others~~
His method is to use position:relative with left top, both of which use negative values~

4. Draw inferences from one example
I suddenly thought of writing something recently The car cleaning forum~The pagination under the post can be played like this~
ttp://www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
" target=_blank>http://www.w3.org/1999/xhtml">

    
    

 
• 1

 
• 2

 
• 3

 
• 4


• 5


• 6

 
• 7

Tip: You can modify some of the code first and then run it

More fun~Give up IE~
ttp://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

" target=_blank>http://www.w3.org/1999/xhtml">

    
    

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

    
• 6

    
• 7

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

效果不是很是很理想
试过把后面的A宽改成到刚好挡到左边的~可是看不到数字~不好看
也试过一边用原来的方法
一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图片~扩展性不好 

也许这就是css本身所限
或许~用JS可以更简单的解决~````