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

CSS透视镜效果

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

<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. DIV+CSS常用的网页规划代码
  2. CSS教程:关于H1的运用技巧
  3. 学习WEB规范心得:网页重构的思绪
  4. CSS罕见的让元素水平居中显示的方法
  5. Li的横向陈列自顺应宽度效果
  6. css完成真正的圆角表格
  7. 制造网页技术CSS全体规划声明的一些用法
  8. CSS 类选择器
  9. div+css制造网页实战笔记心得