首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
CSS/HTML
正文
css静态滤镜 + A:Hover
所属分类：
网络编程
/
CSS/HTML
阅读数： 776
收藏 0
赞 0
分享
css静态滤镜 + A:Hover 的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id=""> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
然后配合上两行 JS, 做成这样,依然 IE Only
Step2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
继续努力，加上磁性效果............就是测试久了会看的头晕.......
Step3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
上一个效果鼠标动的快了会很头晕.......又做了一个磁性效果
Step4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);"> <a href="#" class="a0 a1"> <img src="/articleimg/2006/06/3619/01.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/2006/06/3619/02.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/2006/06/3619/03.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/2006/06/3619/04.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/2006/06/3619/05.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/2006/06/3619/06.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/2006/06/3619/07.jpg" class="i1" /></a> </div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
然后再加上一些不知所谓的特效，让这个东东有点动感（小新：看我的动感光波，BBBBB........） -_-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!-- Author: Hutia --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>WU XIN</title> </head> <body> <div id="main" onmousemove="chkScroll(this);" onmouseout="hidePointer();"> <a href="#" class="a0 a1"> <img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> <a href="#" class="a0 a2"> <img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> <a href="#" class="a0 a3"> <img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> <a href="#" class="a0 a4"> <img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> <a href="#" class="a0 a5"> <img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> <a href="#" class="a0 a6"> <img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> <a href="#" class="a0 a7"> <img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> </div> <div id="pointer"></div> </body> </html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
简单明了带你了解CSS Modules
不要误会，CSS Modules可不是在说“css模块化”这个好像在某些地方见过的词，它其实是特指一种近期才出现的技术手段。什么技术手段呢？下面小编来和大家一起学习一下
评论 0
收藏 0
赞 0
分享
新手学习css优先级
大部分人同样也会在写css的过程中产生很多困惑，比如为什么自己写的某段css没有生效，或者呈现出的样式和预计的不同，但又不知道要如何解决。下面小编来和大家一起学习CSS的优先级
评论 0
收藏 0
赞 0
分享
css进阶学习 选择符
css这种没有程序逻辑的代码中，又能找出什么来说明谁做得更出色呢？下面小编给大家说明如何从css选择符的角度来提高css代码质量。
评论 0
收藏 0
赞 0
分享
实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中，但有时我们需要文字垂直居中，除了表格可以实现这种CSS文字垂直居中以外，还有其它几种方法可以做到
评论 0
收藏 0
赞 0
分享
完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用，但有时还会用到CSS垂直居中，对于小白来说这个就有些难度了，下面看一下我是如何实现的
评论 0
收藏 0
赞 0
分享
webpack高级配置与优化详解
这篇文章主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面，webpack跨域问题等相关内容
评论 0
收藏 0
赞 0
分享
5个HTML5的常用本地存储方式详解与介绍
在HTML5规范之前，存储主要是用cookies，但cookies缺点有在请求头上带着数据，大小是4k之内，今天为大家介绍一下H5的5种存储方式
评论 0
收藏 0
赞 0
分享
CSS代码检查工具stylelint的使用方法详解
stylelint是一个强大的现代CSS检测器,可以让开发者在样式表中遵循一致的约定和避免错误。本文将详细介绍CSS代码检查工具stylelint
评论 0
收藏 0
赞 0
分享
Zen Coding css,html缩写替换大观 快速写出html,css
本文是在zen使用生产中遇到的问题做一些分享。
评论 0
收藏 0
赞 0
分享
javascript代码规范小结
javascript代码规范，大家可以参考下，以便写出更利于阅读的代码。
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
让所谓“网络营销”的人哭笑不得：一个圈外人士的真实网赚经历
怎样利用网络赚钱 网络赚钱有哪些方法
巴西世界杯复盘：七大移动营销案例图文解析
教育培训类网站的盈利模式
Google
未来5大网络销售模式选哪种好？
站长故事
更多
有钱就是任性 2014年科技界大佬十大惊人语录
写给所有站长：其实没必要参加SEO培训
创业失败：一个屌丝站长4年互联网的辛酸经历
我做私服网站的一些事情
人物：戴志康，80后创业者携惊叹号而来
十年了!一个依靠设计师们热情支撑起的网站
