第一步:
定义动画,名字可以各种起,就像方法名一样
1. 定义动画,名称为fadeIn
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
方法里面还...
分类:
Web程序 时间:
2014-12-04 18:11:07
阅读次数:
220
效果:css:hr { width: 95%; border: 0; border-top: 1px solid #333; border-bottom: 1px solid #fff; filter: Alpha(Opacity=30);/*IE*/ opacity: 0.3;/*火狐*/}原理:...
分类:
Web程序 时间:
2014-12-03 11:52:38
阅读次数:
122
显示/隐藏:show/hide(speed,callback);toggle(speed,callback);淡入淡出:fadeIn/fadeOut(speed,callback);fadeToggle(speed,callback);fadeTo(speed,opacity,callback);/...
分类:
Web程序 时间:
2014-12-01 20:47:01
阅读次数:
171
//----------使用opacity属性完成对图片透明度渐变的效果 1 2 3 4 5 6 7 10 23 24 25 26
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;}上面的几个属性分别是:opacity: 0....
分类:
Web程序 时间:
2014-11-29 17:20:55
阅读次数:
210
Filters主要是运用在图片的一些特效,也可以应用到一些视频上面。常被称为滤镜浏览器支持:目前来说,我知道的是webkit可以较好的支持下面来看看各种效果:有以下几种效果可以使用grayscalebrightnesshue-rotateinvertopacitycontrastsaturatesepiadrop-shadowblur我在这里使用..
分类:
Web程序 时间:
2014-11-27 18:44:47
阅读次数:
549
RotateMenu说明
最终效果图
下面这个引用自乱斗西游
设计说明
1.菜单项(MenuItem)平均分布在椭圆(类似)上
2.椭圆长轴为2/3width,短轴为2/8 height
3.最前面的菜单项Scale=1,opacity=255,最后面Scale=0.5,opacity=129.其它位置根据三角函数变换(updatePosition中实现)
4.默认最前...
分类:
其他好文 时间:
2014-11-26 21:01:54
阅读次数:
292
不透明 div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/width:500...
分类:
其他好文 时间:
2014-11-26 20:38:41
阅读次数:
187
不透明 div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/width:500...
分类:
Web程序 时间:
2014-11-25 23:04:24
阅读次数:
150
Z-index研究 opacity和z-index一起使用关于z-index的真正问题是,很少有人理解它到底是怎么用。其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息。不相信我吗?好吧,看看你能否解决下面这个问题:问题:在 接下来的HTM...
分类:
其他好文 时间:
2014-11-25 20:20:45
阅读次数:
193