css 特效

css特效

介绍两种css 特效

1,模糊滤镜

先看效果:

 

 

通过添加css 类实现:

Css代码  

1. .ui-modal-mask-blur {  
2.     -webkit-filter: blur(2px);  
3.     -moz-filter: blur(2px);  
4.     -ms-filter: blur(2px);  
5.     -o-filter: blur(2px);  
6.     filter: blur(2px);  
7. }  

 js代码:

弹出对话框时增加滤镜:

Js代码  

1. if (arguments.length > 2 && showOverlay) {  
2.     $cboxOverlay.height($(document).height());  
3.     $("div.controller2").addClass('ui-modal-mask-blur');  
4.     $cboxOverlay.show();  
5.     }  

 

移除"模糊滤镜":

Js代码  

1. var hideCboxOverlay = function () {  
2.     $cboxOverlay.hide();  
3.     var $controller2 = $('div.controller2');  
4.     if ($controller2.hasClass('ui-modal-mask-blur')) {  
5.         $controller2.removeClass('ui-modal-mask-blur');  
6.     }  
7. }  

 

 

2,模糊边框

先看效果

 css样式:

Css代码  

1. div.shadow {  
2.     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=143, Color=#EA4748)"; /*IE 8*/  
3.     -moz-box-shadow: 4px 3px 10px #EA4748; /*FF 3.5+*/  
4.     -webkit-box-shadow: 4px 3px 10px #EA4748; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/  
5.     box-shadow: 4px 3px 10px #EA4748; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */  
6.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#EA4748); /*IE 5.5-7*/  
7. }