CSS——实现图像远距离翻转效果

仍然是《精通CSS》一书中的例子转换而来，先上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.remote{width:496px;height:501px;position:relative}
.remote ul{margin:0;padding:0;list-style:none;}
.remote a .hotspot{
    width:250px;
    height:250px;
    position:absolute;
    }
.remote .mei a .hotspot{
    top:0;
    left:0;
    }
.remote .lan a .hotspot{
    top:0;
    left:250px;
    }
.remote .zhu a .hotspot{
    top:250px;
    left:0;
    }
.remote .ju a .hotspot{
    top:250px;
    left:250px;
    }
.remote a .link{
    position:absolute;
    display:block;
    width:10em;
    right:-11em;
    cursor:pointer
    }
.remote .mei a .link{
    top:0;}
.remote .lan a .link{
    top:1.2em;}
.remote .zhu a .link{
    top:2.4em;}
.remote .ju a .link{
    top:3.6em;}
.remote a:hover .hotspot,
.remote a:focus .hotspot{
    border:3px dotted #930}
.remote a:hover .link,
.remote a:focus .link{
    color:#930}
</style>
</head>

<body>
<div class="remote">
    <img src="图像远距离翻转.jpg" width="496" height="501" alt="梅兰竹菊图"/>
    <ul>
      <li class="mei">
          <a href="#" title="梅花">
          <span class="hotspot"></span>
          <span class="link">&raquo; 梅</span>
          </a>
      </li>
      <li class="lan">
          <a href="#" title="兰花">
          <span class="hotspot"></span>
          <span class="link">&raquo; 兰</span>
          </a>
      </li>
      <li class="zhu">
          <a href="#" title="竹子">
          <span class="hotspot"></span>
          <span class="link">&raquo; 竹</span>
          </a>
      </li>
      <li class="ju">
          <a href="#" title="菊花">
          <span class="hotspot"></span>
          <span class="link">&raquo; 菊</span>
          </a>
      </li>
  </ul>
</div>
</body>
</html>

效果图：

操过过程中注意的：

一、将文字和热点框（hotspot）分别通过span标签置在a标签里面，可以使其实现同步变化，span标签还是很强大的，要在适当的时候运用~

二、写CSS样式时要有思路，不要乱写，当然开始的时候你最好有一个脑补实现过程的过程，这样你操作起来会发现比较有条理。。。

posted @ 2014-11-27 08:05  我之空间  阅读(428)  评论(0)  编辑  收藏  举报