Team:NCTU Formosa/Test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
@charset "utf-8";
 +
/*=================================
 +
CSS Transition
 +
October 2012
 +
By : Away
 +
http://www.dfuns.idv.tw
 +
http://away.myds.me/wordpress
 +
=================================*/
 +
h1, body{ margin:0;}
 +
a{ text-decoration:none; outline:0;}
 +
img{ border:0;}
 +
body{ letter-spacing:1px; font-family: "微軟正黑體", Arial, Helvetica, sans-serif; background:url(images/bg.jpg);}
 +
.wrapper{ width:960px; margin:auto;}
 +
header{ position:relative; height:160px;}
 +
.logo a, nav{ position:absolute;}
 +
.logo a{ display:block; width:300px; height:130px; background:url(images/logo.png); right:0; text-indent:-9999px;}
 +
footer{ color:#C30; text-align:center;}
 +
.menu{ overflow:hidden; list-style:none; margin:0; padding:0;}
 +
.menu li{ float:left;}
 +
 +
.menu a{
 +
display:block; color:#FFF; font-weight:bold; padding:0 1em; line-height:135px; position:relative;}
 +
 +
.menu a span{
 +
display:block; color:#F90; height:135px; background:#F60; width:100%; z-index:-1; position:absolute; top:-132px; left:0; opacity:.3;}
 +
 +
.menu a:hover{ color:#000; padding-top:20px; margin-bottom:-20px;}
 +
.menu a:hover span{ top:0;}
 +
 +
.adv2{ text-align:center}
 +
.adv2 a{
 +
display:inline-block; margin:0 20px 40px; position:relative; background:#FFF; padding:7px; width:250px; height:156px; text-align:left; overflow:hidden;;}
 +
.adv2 a:hover{ box-shadow:0 0 7px #000;}
 +
.adv2 img{ position:absolute; z-index:1;}
 +
.adv2 .borderAni{
 +
display:block; position:absolute; background:#F90; top:-100%; left:-100%; width:100%; height:100%;}
 +
.adv2 a:hover .borderAni{ top:0; left:0;}
 +
 +
.light{
 +
display:block; position:absolute; background:#000; top:7px; left:7px; z-index:2; width:250px; height:156px; background:url(images/light.png);}
 +
 +
.icon{
 +
display:block; position:absolute; width:100px; height:100px; background:url(images/icon.png); top:100%; left:100%; z-index:2;}
 +
 +
.adv2 a:hover .light{}
 +
.adv2 a:hover .icon{ left:82px; top:35px;}
 +
 +
 +
<!doctype html>
<!doctype html>
<html>
<html>

Revision as of 08:13, 3 September 2014

@charset "utf-8"; /*================================= CSS Transition October 2012 By : Away http://www.dfuns.idv.tw http://away.myds.me/wordpress =================================*/ h1, body{ margin:0;} a{ text-decoration:none; outline:0;} img{ border:0;} body{ letter-spacing:1px; font-family: "微軟正黑體", Arial, Helvetica, sans-serif; background:url(images/bg.jpg);} .wrapper{ width:960px; margin:auto;} header{ position:relative; height:160px;} .logo a, nav{ position:absolute;} .logo a{ display:block; width:300px; height:130px; background:url(images/logo.png); right:0; text-indent:-9999px;} footer{ color:#C30; text-align:center;} .menu{ overflow:hidden; list-style:none; margin:0; padding:0;} .menu li{ float:left;}

.menu a{ display:block; color:#FFF; font-weight:bold; padding:0 1em; line-height:135px; position:relative;}

.menu a span{ display:block; color:#F90; height:135px; background:#F60; width:100%; z-index:-1; position:absolute; top:-132px; left:0; opacity:.3;}

.menu a:hover{ color:#000; padding-top:20px; margin-bottom:-20px;} .menu a:hover span{ top:0;}

.adv2{ text-align:center} .adv2 a{ display:inline-block; margin:0 20px 40px; position:relative; background:#FFF; padding:7px; width:250px; height:156px; text-align:left; overflow:hidden;;} .adv2 a:hover{ box-shadow:0 0 7px #000;} .adv2 img{ position:absolute; z-index:1;} .adv2 .borderAni{ display:block; position:absolute; background:#F90; top:-100%; left:-100%; width:100%; height:100%;} .adv2 a:hover .borderAni{ top:0; left:0;}

.light{ display:block; position:absolute; background:#000; top:7px; left:7px; z-index:2; width:250px; height:156px; background:url(images/light.png);}

.icon{ display:block; position:absolute; width:100px; height:100px; background:url(images/icon.png); top:100%; left:100%; z-index:2;}

.adv2 a:hover .light{} .adv2 a:hover .icon{ left:82px; top:35px;}


<!doctype html> CSS3 Transition - 縮圖展示

版權所有 © 2012 + DFUNS All Rights Reserved.