1. 爱易网页
  2. CSS教程
  3. CSS透视镜效果

CSS透视镜效果

日期：2013-06-02　 浏览次数：21371 次

<style>
body{
 background:url(http://www.zcool.com.cn/pic/background/23/bg23_005.gif);
 overflow:hidden;
}
</style>
<body>
<script>
function id(obj){//取id函数
 return document.getElementById(obj);
}
window.onload=function(){
 id("mask").setCapture();
}
function mm(obj){
 id("mask").setCapture();
 obj.style.left=window.event.x-1500;
 obj.style.top=window.event.y-1500;
}
</script>
<div id=mask style="position:absolute;width:3000;height:3000px;" onmousemove="mm(this);">
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:20px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:20px;"></div>
 <div style="float:left;width:1490px;height:20px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:20px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
 <div style="float:left;width:1490px;height:1490px;background-color:white;filter:alpha(opacity=50);"></div>
</div>
</body>

相关资料更多>

  1. 网页规范学习：XHTML+CSS调用样式表
  2. CSS隐藏网页文字的几种常用方法
  3. CSS幽默代码:远离IE6消灭IE6抵抗IE6
  4. CSS层叠样式的主次顺序
  5. CSS网页制造实例:三列等高DIV的网页规划
  6. 新规范中细线表格的完成
  7. 经典 用CSS完成表单form规划
  8. 看法阅读器：Internet Explorer
  9. 天涯论坛下面固定漂浮特效的做法