<!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=gb2312" />
<title>Action :hovert poluoluo.com</title>
<style>
body {background-color:#333;}
.main{ background-color:#fff;}
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880{ background:transparent; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/*
Golden Grid - CSS Library
Author:Vladimir Carrer
*/
/* CSS Grid */
.main { margin:0 auto; width:970px; padding-top:10px; }
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960 {float:left; display: inline; margin-left:10px; }
/* 6 columns */
.g160 {width:150px; }
.g320 {width:310px;}
.g480 {width:470px;}
.g640 {width:630px;}
.g800 {width:790px;}
.g960 {width:950px;}
/* 12 columns */
.g80 {width:70px;}
.g240 {width:230px;}
.g400 {width:390px;}
.g560 {width:550px;}
.g720 {width:710px;}
.g880 {width:870px;}
/* margin */
.ml80{margin-left:90px;}
.ml160{margin-left:170px;}
.ml240{margin-left:250px;}
.ml320{margin-left:330px;}
.ml400{margin-left:410px;}
.ml480{margin-left:490px;}
.ml560{margin-left:560px;}
.ml640{margin-left:650px;}
.ml720{margin-left:730px;}
.ml800{margin-left:810px;}
.ml880{margin-left:890px;}
.ml960{margin-left:970px;}
.inside{margin-left:0;}
p.grid{ padding-left:10px;}
.clear {clear:both;}
.clearfix, .main{ display:block;}
.clearfix:after, .main:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
body { font:75%/1.5em "lucida grande","lucida sans unicode", sans-serif;}
p { padding:0 0 1em 0;color:#111;}
p.first:first-letter{ float:left;font-family: Palatino,'Palatino Linotype',Georgia, sans-serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; }
p img { float: left; margin: 0.3em 0.833em 0.833em 0; padding: 0; }
p img.right { float: right; margin: 0.3em 0 0.833em 0.833em; }
h1,h2{ font-weight:normal; color: #333; font-family:Georgia, "Times New Roman", serif; }
h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, "Times New Roman", serif; }
h1 { font-size: 2.2em; margin-bottom: 0.682em; }
h2 { font-size: 1.9em; margin-bottom: 0.79em; }
h3 { font-size: 1.7em; margin-bottom: 0.882em; }
h4 { font-size: 1.4em; margin-bottom: 1.071em; }
h5,h6 { font-size: 1.3em; margin-bottom: 1.154em; }
/* Color palete */
.water { color:#5582d1; }
.earth { color:#4e3e2c; }
.air { color:#f1fff7; }
.fire { color:#ff8a19; }
.wine { color:#4a040a; }
.beer { color:#F0C030; }
.caffe { color:#473523; }
.caffe-cream { color:#b68d3d; }
.espresso { color:#2c1901; }
.caramel{ color:#ab671f; }
.chocolate { color:#290200; }
.black-pepper { color:#444334; }
.pepper-lite { color:#8d8a72; }
.lipstick { color:#c20c0c; }
li ul,
li ol { margin:0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }
a { color:#035292; text-decoration:none; }
a:hover { text-decoration: underline; }
table { margin-bottom:1.5em; border-collapse: collapse; }
th { font-weight:bold; }
tr,th,td { margin:0; padding:0 1.5em 0 1em; height:18px; }
tfoot { font-style: italic; }
caption { text-align:center; font-family:Georgia, serif; }
abbr, acronym { border-bottom:1px dotted #000; }
address { margin-top:1.5em; font-style: italic; }
del {color:#000;}
blockquote { padding:1em 1em 1em 1.5em; font-family:baskerville,"palatino linotype",serif; }
blockquote > *:first-child:before { content:"\201C";font-size:2.5em;margin-left:-.62em;font-family:georgia,serif;padding-right:.2em;color:#aaa;line-height:0; }/* From Tripoli */
strong { ont-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; }
hr { margin-bottom:1.5em; }
/*other small things */
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.b { font-weight:bold; }
.i { font-style:italic; }
.indent { text-indent:1.5em;}
.open { font-variant: small-caps; }
p.break { text-align:center;text-indent:0;line-height:0; }
p.zero{padding:0; margin:0}
p.one { padding:0 1em 1em 1em;color:#111;}
p img.right10 { float: right; margin:0.833em; }
.oldbook { font-family:"Book Antiqua","Warnock Pro","Goudy Old Style","Palatino",Georgia,serif; }
.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; }
.mono { font-family:"Courier New", Courier, monospace; }
/* CSS Action Framework */
/* On mouseover */
.h-scale:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.h-translate:hover {
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.h-rotate:hover {
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.h-box-shadow:hover {
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
}
.h-multitransform:hover {
-moz-transform:rotate(70deg) scale(1.5);
-webkit-transform:rotate(70deg) scale(1.5);
-o-transform:rotate(70deg) scale(1.5);
transform:rotate(70deg) scale(1.5);
}
.h-hide:hover {
-webkit-transition-duration: 3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity: 0;
}
/* On Click */
.a-scale:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.a-translate:active {
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.a-rotate:active {
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.a-box-shadow:active {
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
}
.a-multitransform:active {
-moz-transform:rotate(70deg) scale(1.5);
-webkit-transform:rotate(70deg) scale(1.5);
-o-transform:rotate(70deg) scale(1.5);
transform:rotate(70deg) scale(1.5);
}
.a-hide:active {
-webkit-transition-duration: 3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity: 0;
}
/* Target */
.t-scale:target {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.t-translate:target {
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.t-rotate:target {
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.t-box-shadow:target {
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
}
.t-multitransform:target{
-moz-transform:rotate(70deg) scale(1.5);
-webkit-transform:rotate(70deg) scale(1.5);
-o-transform:rotate(70deg) scale(1.5);
transform:rotate(70deg) scale(1.5);
}
.t-hide:target {
-webkit-transition-duration: 3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity: 0;
}
</style>
</head>
<body>
<div class="main" >
<div class="g960">
<h1>Action :hover 摘自：<a href="http://wwwpoluoluo.com">www.poluoluo.com</a></h1>
<h5 class="note">Look Ma no JavaScript</h5>
<br />
</div>
<div class="clear"> </div>
<div id="a" class="g160 h-scale" style="border:2px solid red; height:150px">鼠標過來放大</div>
<div class="clear"> </div>
<div id="b" class="g160 h-translate" style="border:2px solid red; height:150px">鼠標過來移位</div>
<div class="clear"> </div>
<div id="c" class="g160 h-rotate" style="border:2px solid red; height:150px">鼠標過來旋轉45度</div>
<div class="clear"> </div>
<div id="d" class="g160 h-box-shadow" style="border:2px solid red; height:150px">鼠標過來投影效果</div>
<div class="clear"> </div>
<div id="e" class="g160 h-multitransform" style="border:2px solid red; height:150px">鼠標過來旋轉</div>
<div class="clear"> </div>
<div id="f" class="g160 h-hide" style="border:2px solid red; height:150px">鼠標過來慢慢變淡</div>
<div class="clear"> </div>
</div>
</body>
</html>