css特效
介绍两种css 特效
1,模糊滤镜
先看效果:
通过添加css 类实现:
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代码:
弹出对话框时增加滤镜:
Js代码
- if (arguments.length > 2 && showOverlay) {
- $cboxOverlay.height($(document).height());
- $("div.controller2").addClass('ui-modal-mask-blur');
- $cboxOverlay.show();
- }
移除"模糊滤镜":
Js代码
- var hideCboxOverlay = function () {
- $cboxOverlay.hide();
- var $controller2 = $('div.controller2');
- if ($controller2.hasClass('ui-modal-mask-blur')) {
- $controller2.removeClass('ui-modal-mask-blur');
- }
- }
2,模糊边框
先看效果
css样式:
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*/
- }
