CSS透视镜效果

<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>

时间: 2024-08-22 14:09:33

CSS透视镜效果的相关文章

20 个精美的Ajax + CSS 的表格效果

20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据.现在让我们来看看这些表格: #1. TableclothTablecloth 由CSS Globe 开发,是一个轻量级的.易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中. #2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单

CSS 数字外框效果

效果 CSS 数字外框效果 代码 CSS 代码: li  {      float:left;      overflow:hidden;      margin-left:3px;      padding:3px 5px 3px 5px;      border:1px solid #FF0000;      background-color:#000000;      color:#FFFFFF;      text-align:center;      line-height:100%;

CSS翻页效果,鼠标放上时变化,无需JS

网页制作Webjx文章简介:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titleDIV CSS实例

CSS实现分页效果制作实例

CSS实现分页效果制作实例,教程和代码如下:  这个教程要说明的是如何为搜索结果或更长记录列表设计分页.因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式. 这个教程也包含有实现Flickr.Digg式的简洁分页样式的HTML/CSS代码,随时可以应用于你的WEB项目中. Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and

超强,用CSS构建iframe效果

css iframe应用很普遍,通常的需求有两种: 1,获取iframe效果,就是带一个滚动条,可以省不少版面.2,要嵌一个页面,实现框架链接. 如果不方便使用iframe,可以有如下解决方案: 第一种需求如果我们使用css布局来实现,即可以少一个页面,也可以提高效率.第二种需求可以采用xmlhttp远程获取. A. 直接模拟iframe 用层做容器   引用: #content { overflow:auto; height:200px; width:600px; background:#f0

17个有趣实用的CSS 3悬停效果教程

  这里是我们收集的一些很有用的CSS 3悬停效果教程合集. HTML 5和CSS 3拓展了网页设计的可能性,它们引入了很多新属性来让你的网站变得丰富而饱满.在这篇文章中,我分享了18个CSS3悬停效果的教程,来让你的网站变得饱满并且传达更好的用户体验.本文介绍了CSS 3的动画属性,使用这个属性可以不用费多大力气就创建出一个悬停效果.我们希望你会觉得我们收集的CSS 3悬停效果教程合集是有用的,另外如果你知道任何CSS 3悬停效果教程的话,请在文章下方给我留言. 使用SVG的形状悬停效果 在这

你的智能设备安全吗?360透视镜可全面检测安卓设备漏洞

肆虐全球的"Wanna Cry"病毒武器暂时得到控制,然而大家仍然对漏洞攻击心有余悸,并举一反三地考虑到,其他智能系统是否存在漏洞,如果被利用,后果是否同样严重?作为移动端拥有最多使用者的Android系统,成为了大家关注的重点. 360专门推出了"360透视镜",全面检测Android系统漏洞,提前预警系统漏洞风险."360透视镜"检测范围亦不仅限于手机,所有使用Android系统的平板电脑.智能电视.智能手表.车机系统等均可进行扫描检测.借助

CSS 实现打字效果

原文:CSS 实现打字效果 JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"></div> <script src="typed.js"></script> <script> $(function(){ $(".element").typed({ strings: [&q

用CSS构建iframe效果代码_经验交流

用CSS构建iframe效果 来自:网页教学网 A. 直接模拟iframe,用层做容器 ·仅用css编写无限分级弹出菜单 ·浏览器滚动条的参数总结 ·引入css样式表的四种方式介绍 ·两种方式实现的文字竖排效果 ·网页设计高级布局40例参考 ·从GMail认识W3C标准和Ajax