滤镜模糊效果,利用了文字阴影和透明。其实是抄的iSlider官网的
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>css3效果</title>
<style>
table{width: 500px; border-collapse: collapse; border:1px solid #ccc;}
table tr td{ height: 24px;border:1px solid #ccc; transition: all 300ms; background: rgb(250,250,250)}
tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
tbody:hover tr:hover td {
color: #444;
text-shadow: 0 1px 0 #fff;
}
</style>
<body>
<table>
<tbody>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
<tr>
<td>000</td><td>1111</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图如下:鼠标移到哪一行,哪一行就清楚,其他的好像有一层毛玻璃遮住一样的效果
滤镜模糊效果,利用了文字阴影和透明。其实是抄的iSlider官网的的更多相关文章
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- CSS利用filter/opacity实现背景透明
先看看众所周知的解决方案 如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=);/*IE浏览器*/ op ...
- android:text 文字阴影设置
<SPAN style="FONT-SIZE: 16px"><TextView android:id="@+id/text" a ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- css学习_css文字阴影、盒子阴影
文字阴影和盒子阴影的用法: 多阴影
随机推荐
- 把Nodepad++添加进右键菜单
1.运行注册表编辑器:开始->运行->regedit 2.找到HKEY_CLASSES_ROOT/*/shell 3.右击shell,选择 新建->项 4.项的名字为Edit wit ...
- python函数传参是传值还是传引用?
首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传 ...
- 【GDI+】一些规则多边形分离的问题
在近期的工作中,需要做一样工作:将一些有规则的图形,进行适当的分离,以达到不重叠的问题. 首先组成图形的点都可以是按照逆时针排好序的. 规则的图形可以大致分为三类: A :两个点组成的线 或者 四个点 ...
- XMl的解析
MainActivitypackage com.example.secondweek_test2; import java.io.BufferedInputStream; import java.io ...
- python爬虫框架scrapy实例详解
生成项目scrapy提供一个工具来生成项目,生成的项目中预置了一些文件,用户需要在这些文件中添加自己的代码.打开命令行,执行:scrapy st... 生成项目 scrapy提供一个工具来生成项目,生 ...
- python字典和列表使用的要点
dicts = {} lists = [] dicts['name'] = 'zhangsan' lists.append(dicts) 这时候lists的内容应该是[{'name': 'zhangs ...
- 【python cookbook】【字符串与文本】14.字符串连接及合并
问题:将许多小字符串合并成一个大的字符串 解决方案: 1.针对少数量的字符串:+ 2.针对大量的字符串对象的连接,更高效的方法:join() 3.更加复杂的字符串:format() >>& ...
- TI CC254x BLE教程 1
约定, 第一次翻译这种东西, 专有名词的翻译原则还是不太清楚, 总之涉及有可能误解的词, 都用双语, 如果是简单的, 直接英文或者中文, 取决于我是否能找到中文合适的词来翻译. 何为BLE: 1. 是 ...
- IOS中用UIStoryBoard类初始化/跳转控制器
1.空工程中通过创建storyboard文件加载页面 //获取Main.storyboardUIStoryboard *mainStory = [UIStoryboard storyboardWi ...
- android 比较靠谱的图片压缩
第一:我们先看下质量压缩方法: private Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteAr ...