既是安安

蝴蝶飞不过沧海,谁忍心责怪?

CSS实现视觉渐远的效果

效果差不多也就是上图的这个样子,这个看起来没有什么实用价值,实际上,嗯,好像也没什么用哈。。。

基本原理如图所示:

将所有的盒子都绝对定位,然后将宽高各50%的递缩小,并且在top、right、bottom和left针对性的偏移即可,代码如下(你也可以点击这里查看该DEMO):

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>CSS to achieve the visual effect and further away[既是安安]</title>
  6. <link rel="stylesheet" rev="stylesheet" type="text/css" href="http://www.jsann.com/framework/reset.css" />
  7. <style type="text/css">
  8. div
  9. {
  10.     background-color:#a40000;
  11.     position:absolute;
  12. }
  13. div.main
  14. {
  15.     width:100px;
  16.     height:100px;
  17.     top:50%;
  18.     left:50%;
  19. }
  20. div.main div
  21. {
  22.     width:50%;
  23.     height:50%;
  24. }
  25. div.main div div div div
  26. {
  27.     overflow:hidden;/* 为了兼容IE6 */
  28. }
  29. div.main div.left-top,div.main div.left-top div
  30. {
  31.     top:-50%;
  32.     left:-50%;
  33. }
  34. div.main div.right-top,div.main div.right-top div
  35. {
  36.     top:-50%;
  37.     right:-50%;
  38. }
  39. div.main div.left-bottom,div.main div.left-bottom div
  40. {
  41.     left:-50%;
  42.     bottom:-50%;
  43. }
  44. div.main div.right-bottom,div.main div.right-bottom div
  45. {
  46.     right:-50%;
  47.     bottom:-50%;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52.     <div class="main">
  53.         <div class="left-top"><div><div><div></div></div></div></div>
  54.         <div class="right-top"><div><div><div></div></div></div></div>
  55.         <div class="left-bottom"><div><div><div></div></div></div></div>
  56.         <div class="right-bottom"><div><div><div></div></div></div></div>
  57.     </div>
  58. </body>
  59. </html>

这个方法在IE6下有一个BUG,就是最后的一个盒子的高度不能小于6px,原因就是:

大家都知道IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12px 左右高度的层。另一方面,除了中间的那个盒子,其他的盒子都是在其基础之上偏移而来。也就是说,最多的,我们可以给最后的那个div加上overflow:hidden;(因为我们给任何一个div加上overflow:hidden;之后,它将不在会有子级偏移出来)这样的话最后的那个div的最小高度应该在6px左右(假设IE6给盒子设的默认高度是12px;)那样的话才不至于它的父级需要overflow:hidden;。

[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/CSS_to_achieve_the_visual_effect_and_further_away.html

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top