Heim > Web-Frontend > HTML-Tutorial > css 特效_html/css_WEB-ITnose

css 特效_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:44:27
Original
898 Leute haben es durchsucht

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); }
Nach dem Login kopieren

js代码:
弹出对话框时增加滤镜:

if (arguments.length > 2 && showOverlay) {    $cboxOverlay.height($(document).height());    $("div.controller2").addClass('ui-modal-mask-blur');    $cboxOverlay.show();    }
Nach dem Login kopieren

移除”模糊滤镜”:

var hideCboxOverlay = function () {    $cboxOverlay.hide();    var $controller2 = $('div.controller2');    if ($controller2.hasClass('ui-modal-mask-blur')) {        $controller2.removeClass('ui-modal-mask-blur');    }}
Nach dem Login kopieren

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*/ }
Nach dem Login kopieren

最终效果参见:
查看特效

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage