小tip:CSS3下的圆形遮罩效果实现与应用

标签: css相关 border border-radius css3 transition | 发表时间:2011-12-23 16:11 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2118

一、效果直击

您可以狠狠地点击这里: CSS3下的圆形遮罩效果demo

因为是使用纯洁的CSS3实现,因此,IE6~8浏览器又一次光荣获得“打酱油”的称号!

圆形遮罩效果FireFox8下的截图 张鑫旭-鑫空间-鑫生活

鼠标经过年轻的张含韵小姐身体的任一部位,然后——
FireFox8下圆形遮罩的菊花截图

在Chrome浏览器下,或许是受到“菊花”的感应,其圆形呈开放的菊花状,效果很闪那!!
Chrome浏览器下菊花状遮罩 张鑫旭-鑫空间-鑫生活

二、小小原理

虽说效果离不开CSS3,但,最最关键的核心属性是CSS border属性,偌大的半透明边框属性(demo中边框宽度512像素),边框颜色为 rgba黑色半透明,然后 50%圆角。

相关CSS代码如下:

.test_cover {
    width: 100px;
    height: 100px;
    border: 512px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    /* 定位 */
    position: absolute;
    left: -325px;
    top: -465px;
}

很简单吧,然后父标签来个尺寸限制,溢出隐藏就完事大吉了。具体细节可参见demo页面的代码展示。

三、实际应用

由于本效果是CSS驱动的,因此对于PC浏览器,目前还无法投入实际应用,但是,如果针对Android或是iphone、ipad等设备开发页面,该技术就可以有实际的应用了。

应用背景如下:
当我们退出一款新的产品的时候,所有的用户都是new user,他们面对一个新颖陌生的产品,肯定会有一些不熟悉的地方,此时,一个善意的引导与说明就很有必要。既可以展示产品的优点,又方便用户上手操作。

此时,我们可以尝试使用遮罩效果(可以将用户的注意力focus在一点上)来做引导提示,体验会很舒服。

您可以狠狠地点击这里: CSS3下圆形遮罩效果手机应用demo

遮罩引导提示效果截图 张鑫旭-鑫空间-鑫生活

原理与上面的简单demo一直,多的就是用脚本做定时播放了哈!demo页面有完整的代码展示,这里就不平白撑篇幅了。

四、关于IE浏览器

IE浏览器实际上也是可以实现类似的效果的,这里的类似是指同样可以实现中间镂空,四周半透明的遮罩(滤镜,你懂的);至于圆角效果,如果你精力足够,也是可以折腾出来的(VML等,你懂的)。不过个人观点没必要过多折腾,精力有限,应该放在更重要的事情上。

感谢阅读,希望本文的内容能够对您的学习有所帮助。

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2118

如果您觉得本文的内容对您的学习有所帮助: 支付鼓励

(本篇完)

有话要说,点击 这里发表评论。

相关 [tip css3 圆形] 推荐:

小tip:巧用CSS3属性作为CSS hack

- 逸川 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1867. 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. ————- 假设这是大家全神贯注思考的18分钟 ————————.

Tip中小三角的实现

- 溪梦 - WEB前端开发
前段时间专门研究了一下腾讯微博的Tip,很有意思. tip中的小箭头是用“◆”(encode为:◆)字符模拟的. 以前也写过类似的实现方案《用css的border属性实现三角》. 用“◆”字符模拟小三角有一个有点就是:比如tip有border时,也可以用两个绝对定位的“◆”字符模拟. 如图: 注意:最好根据您的实际情况设置“◆”的字体,我这里用了宋体,有棱有角真好.

HBase的一些应用设计tip

- - BlogJava_首页
1,对于HBase的存储设计,要考虑它的存储结构是:rowkey+columnFamily:columnQualifier+timestamp(version)+value = KeyValue in HBase,一个KeyValue依次按照rowkey,columnkey和timestamp有序.

weka特征预处理的一些tip

- - BlogJava-首页技术区
首先,提供两个地址,这里包含了全部的内容原文:. weka可以以目录形式读入数据. 然后再简单说一下weka在做文本特征内容处理时候需要注意的东西:. 声明一点,在weka的gui下是没法使用这个功能的:以目录形式读入数据. 首先,把要处理的数据写入到这样的目录结构下:. 然后在源码包下,命令行执行 java weka.core.converters.TextDirectoryLoader -dir text_example > text_example.arff.

玩mysql必须知道的10个tip

- - SQL - 编程语言 - ITeye博客
比如我的mysql是用源码方式安装在/usr/local/mysql. 自动:将/usr/local/mysql/share/mysql/mysql.server拷贝到/etc/rc.d/init.d/下,然后. chkconfig --add mysql.server就可以开机就启动mysql服务了.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.