css特效
介绍两种css 特效
1,模糊滤镜
先看效果:
对比一下没有滤镜效果的界面:
通过添加css 类实现:
.ui-modal-mask-blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px); }
js代码:
弹出对话框时增加滤镜:
if (arguments.length > 2 && showoverlay) { $cboxoverlay.height($(document).height()); $(div.controller2).addclass('ui-modal-mask-blur'); $cboxoverlay.show(); }
移除”模糊滤镜”:
var hidecboxoverlay = function () { $cboxoverlay.hide(); var $controller2 = $('div.controller2'); if ($controller2.hasclass('ui-modal-mask-blur')) { $controller2.removeclass('ui-modal-mask-blur'); }}
2,模糊边框
先看效果
css样式:
div.shadow { -ms-filter: progid:dximagetransform.microsoft.shadow(strength=10, direction=143, color=#ea4748); /*ie 8*/ -moz-box-shadow: 4px 3px 10px #ea4748; /*ff 3.5+*/ -webkit-box-shadow: 4px 3px 10px #ea4748; /*saf3-4, chrome, ios 4.0.2-4.2, android 2.3+*/ box-shadow: 4px 3px 10px #ea4748; /* ff3.5+, opera 9+, saf1+, chrome, ie10 */ filter: progid:dximagetransform.microsoft.shadow(strength=10, direction=135, color=#ea4748); /*ie 5.5-7*/ }
最终效果参见:
查看特效