CSS3学习笔记之立体盒子(带动画效果)
CSS3学习笔记之立体盒子是纯CSS3实现的动画特效,当你的鼠标移到盒子的边上他会打开盒子让你看到里面,效果真棒,因为IE9以下版本暂时不支持CSS3,所以网友们在看效果的时候请不要用IE浏览器来运行,为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。
主要用了CSS3的以下属性:
1、transform
2、transition
3、background
样式代码如下:
#box_before,#box_back,#box_left,#box_right,#box_top,#box_bottom { height:240px; width:240px; text-align:center; font-weight:bolder; color:#fff; font-size:60px; position:absolute; -webkit-transform-origin:right top; -moz-transform-origin:right top; -ms-transform-origin:right top; -o-transform-origin:right top; transform-origin:right top; box-shadow:0 0 2px rgba(50,50,50,0.1); } #box_back { left:240px; top:88px; background:-webkit-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-moz-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-ms-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-o-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); -webkit-transform:skew( 0deg,20deg ); -moz-transform:skew( 0deg,20deg ); -ms-transform:skew( 0deg,20deg ); -o-transform:skew( 0deg,20deg ); transform:skew( 0deg,20deg ); } #box_left { background:-webkit-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-moz-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-ms-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:-o-linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); background:linear-gradient( top,rgba(255,255,255,0.1),rgba(0,0,0,0.1) ); -webkit-transform:skew( 0deg,-20deg ); -moz-transform:skew( 0deg,-20deg ); -ms-transform:skew( 0deg,-20deg ); -o-transform:skew( 0deg,-20deg ); transform:skew( 0deg,-20deg ); } #box_bottom { width:218px; top:240px; left:19px; background:#b9b9b9; -webkit-transform:rotate( -50deg ) skew( 20deg,30deg ); -moz-transform:rotate( -50deg ) skew( 20deg,30deg ); -ms-transform:rotate( -50deg ) skew( 20deg,30deg ); -o-transform:rotate( -50deg ) skew( 20deg,30deg ); transform:rotate( -50deg ) skew( 20deg,30deg ); } #box_before { left:0; top:174px; background:rgba(232,232,232,.7); -webkit-transform:skew( 0deg,20deg ); -moz-transform:skew( 0deg,20deg ); -ms-transform:skew( 0deg,20deg ); -o-transform:skew( 0deg,20deg ); transform:skew( 0deg,20deg ); -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } #box_before:hover { -webkit-transform:skew( 0deg,0deg ); -moz-transform:skew( 0deg,0deg ); -ms-transform:skew( 0deg,0deg ); -o-transform:skew( 0deg,0deg ); transform:skew( 0deg,0deg ); } #box_right { left:240px; top:87px; background:rgba(232,232,232,.7); -webkit-transform:skew( 0deg,-20deg ); -moz-transform:skew( 0deg,-20deg ); -ms-transform:skew( 0deg,-20deg ); -o-transform:skew( 0deg,-20deg ); transform:skew( 0deg,-20deg ); -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } #box_right:hover { -webkit-transform-origin:left; -moz-transform-origin:left; -ms-transform-origin:left; -o-transform-origin:left; transform-origin:left; -webkit-transform:skew( 0deg,-20deg ); -moz-transform:skew( 0deg,-20deg ); -ms-transform:skew( 0deg,-20deg ); -o-transform:skew( 0deg,-20deg ); transform:skew( 0deg,-20deg ); } #box_top { width:220px; top:-0; left:19px; background:rgba(216,216,216,.95); -webkit-transform:rotate( -50deg ) skew( 20deg,30deg ); -moz-transform:rotate( -50deg ) skew( 20deg,30deg ); -ms-transform:rotate( -50deg ) skew( 20deg,30deg ); -o-transform:rotate( -50deg ) skew( 20deg,30deg ); transform:rotate( -50deg ) skew( 20deg,30deg ); -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } #box_top:hover { top:-80px; } #box_before:before,#box_right:before { -webkit-transform:translate(0px,242px); -moz-transform:translate(0px,242px); -ms-transform:translate(0px,242px); -o-transform:translate(0px,242px); transform:translate(0px,242px); background:-webkit-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background:-moz-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background:-ms-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background:-o-linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background:linear-gradient(top,rgba(255,255,255,0.2),rgba(255,255,255,0.3) 2%,rgba(255,255,255,0) 50%,rgba(255,255,255,0)); } #box_before:before { width:240px; left:1px; }
效果如下:
在线演示和下载
本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!