css 特效
来源:互联网 发布:php 获取session数据 编辑:程序博客网 时间:2024/06/05 06:20
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*/}
最终效果参见:
查看特效
1 0
- css特效
- css特效
- css 特效
- css 特效
- CSS特效
- Div+Css+Js特效
- js+css表格特效
- css基础--滤镜特效
- CSS特效介绍
- js+css特效菜单栏
- css样式特效
- CSS特效练习
- CSS 部分小特效
- CSS-页面特效
- CSS放大镜特效
- CSS动画--页面特效
- CSS 页面特效初步
- CSS颜色混合模式特效
- 动态规划专题小结:四边形不等式优化
- DDNS Wild Card
- 俞敏洪谈陈向东离职:并非内战只因志存高远
- hdu1573 X问题 中国剩余定理
- 向表中插入一条多个字段的数据,其中一个字段是从另一张表中获得的,其余字段是自己的
- css 特效
- vim中字母大小写变换
- 自定义标签JSTL+国际化
- 嵌套类与局部类
- 毕业设计
- [刷题]Jump Game
- __thread关键字
- DS之求解二叉树的叶子结点和深度
- 二维数组的鞍点问题(c++)