css 特效_html/css_WEB-ITnose
程序员文章站
2022-05-18 19:38:03
...
css特效
介绍两种css 特效
1,模糊滤镜
先看效果:
介绍两种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总结(下篇)_html/css_WEB-ITnose
-
css段落首字母下沉_html/css_WEB-ITnose
-
Codeforces Round #266 (Div. 2) B. Wonder Room_html/css_WEB-ITnose
-
CSS 之 浅入浅出_html/css_WEB-ITnose
-
文字环绕图片_html/css_WEB-ITnose
-
HTML编写需要注意的事项_html/css_WEB-ITnose
-
dreamweaver 正则表达式查找替换_html/css_WEB-ITnose
-
IE6里图片和容器之间的空隙_html/css_WEB-ITnose
-
这问这种在li中可以点击的效果做出来?_html/css_WEB-ITnose
-
请教一下, 这个span怎么就换行了呢_html/css_WEB-ITnose