css3浮动层变大变小切换效果
一个css3动画效果,点击链接标签弹出详细内容层,从页脚升起然后平铺整个屏幕,而原来的内容层缩小。具体看效果了,装逼可以一用。嘿嘿。注意使用标准浏览器如chrome,firefox,ie8-就不要来凑热闹了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> html, body,#wrapper{height:100%;width:100%;overflow:hidden;margin:0;padding:0;background:#eee} #wrapper #content{width:100%;height:100%;background:#fff} #wrapper #content{ -moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1); transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1); } #wrapper.on #content{ -webkit-transform:scale(.7,.7); -moz-transform:scale(.7,.7); transform:scale(.7,.7);backgound:# } #open{ position:absolute; top:0; left:0; visibility:hidden; -webkit-transform:translateY(100%) scale(.5,.5); -moz-transform:translateY(100%) scale(.5,.5); -ms-transform:translateY(100%) scale(.5,.5); transform:translateY(100%) scale(.5,.5); -moz-transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1.6s cubic-bezier(0.23, 1, 0.32, 1); transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1); background:#fff;width:100%;height:100%;z-index:1100 } #open.on{ visibility:visible; -webkit-transform:translateY(0%) scale(.5,.5); -moz-transform:translateY(0%) scale(.5,.5); -ms-transform:translateY(0%) scale(.5,.5); transform:translateY(0%) scale(.5,.5); -moz-transition:all .5s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all .5s cubic-bezier(0.23, 1, 0.32, 1); transition:all .5s cubic-bezier(0.23, 1, 0.32, 1); } #open.s{ -moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1); transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform:translateY(0%) scale(1,1); -moz-transform:translateY(0%) scale(1,1); -ms-transform:translateY(0%) scale(1,1); transform:translateY(0%) scale(1,1); } #open a.close{position:absolute;top:10px;right:10px;border:solid 1px #eee;width:20px;height:20px;text-align:center;line-height:20px} #mask{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.4); visibility:hidden; opacity:0; } #mask.on{ visibility:visible; opacity:1; } </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <div id="wrapper"> <div id="content"><a href="#">新闻标题</a></div> </div> <div id="open">新闻内容<a href="#" class="close">X</a></div> <div id="mask"></div> <script> $('#content a').click(function(){ $('#open,#wrapper,#mask').addClass('on') setTimeout(function(){$('#open').addClass('s');},500); return false; }) $('#open a.close').click(function(){ $('#open').removeClass('s') setTimeout(function(){$('#open,#wrapper,#mask').removeClass('on')},500) return false }) </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:css3浮动层变大变小切换效果