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

时间：2014-11-27 09:07:23 阅读：244 评论：0 收藏：0 [点我收藏+]

仍然是《精通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>

效果图： bubuko.com,布布扣

操过过程中注意的：

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

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

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

标签：style blog http io ar color os sp on

原文地址：http://www.cnblogs.com/fanyj/p/4125543.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行