首页 > 代码库 > CSS——实现图像远距离翻转效果
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">» 梅</span> </a> </li> <li class="lan"> <a href="#" title="兰花"> <span class="hotspot"></span> <span class="link">» 兰</span> </a> </li> <li class="zhu"> <a href="#" title="竹子"> <span class="hotspot"></span> <span class="link">» 竹</span> </a> </li> <li class="ju"> <a href="#" title="菊花"> <span class="hotspot"></span> <span class="link">» 菊</span> </a> </li> </ul></div></body></html>
效果图：
操过过程中注意的：
一、将文字和热点框（hotspot）分别通过span标签置在a标签里面，可以使其实现同步变化，span标签还是很强大的，要在适当的时候运用~
二、写CSS样式时要有思路，不要乱写，当然开始的时候你最好有一个脑补实现过程的过程，这样你操作起来会发现比较有条理。。。
CSS——实现图像远距离翻转效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。