css 特效

浏览数：66 / 时间：2015年06月09日

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*/
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css 特效