Maison > interface Web > tutoriel HTML > css 特效_html/css_WEB-ITnose

css 特效_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:44:27
original
899 Les gens l'ont consulté

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); }
Copier après la connexion

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

if (arguments.length > 2 && showOverlay) {    $cboxOverlay.height($(document).height());    $("div.controller2").addClass('ui-modal-mask-blur');    $cboxOverlay.show();    }
Copier après la connexion

移除”模糊滤镜”:

var hideCboxOverlay = function () {    $cboxOverlay.hide();    var $controller2 = $('div.controller2');    if ($controller2.hasClass('ui-modal-mask-blur')) {        $controller2.removeClass('ui-modal-mask-blur');    }}
Copier après la connexion

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*/ }
Copier après la connexion

最终效果参见:
查看特效

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal