CSS3學習筆記之立體盒子動畫代碼

2024-09-05 12:19:09

字體：大中小

來源：轉載

供稿：網友

網友Adam、分享的CSS3學習筆記之立體盒子，帶動畫效果的例子，鼠標放在例子的任一面上，都可打開盒子，對CSS3制作動畫效果有很高的參考價值。測試代碼請遠離IE。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>網友Adam、分享CSS3學習筆記之立體盒子</title><style>* { margin:0; padding:0; list-style:none; }body { background:#ccc; }#box_before:before,#box_right:before{ background:rgba(0,0,0,0); display:block; height:240px; width:240px; content:" "; }#stage {	height: 300px; width:300px; margin: 0 auto; position:relative; top:60px; left:-100px;}#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;}</style></head><body><h1 style="margin:0 auto; margin-top:30px; width:800px; text-align:center; text-shadow:1px 1px 0px #eee; color:rgba( 0,0,0,.8 );"> Adam CSS3 立體盒子（ 鼠標劃過盒子試試 ） </h1><dl id="stage">    <dd id="box_back"></dd>    <dd id="box_bottom"></dd>    <dd id="box_left"></dd>    <dd id="box_before"></dd>    <dd id="box_top"></dd>    <dd id="box_right"></dd></dl></body></html>

上一篇：html5寫的時鐘圓形表盤

下一篇：Canvas雪花飄飛，html5代碼