|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
破洛洛文章简介：CSS3完成多种Action:hovert效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Action:hovertpoluoluo.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;
}
/*Tablesstillneedcellspacing="0"inthemarkup.*/
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
table,td,th{vertical-align:middle;}
/*Removepossiblequotemarks(")from<q>,<blockquote>.*/
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"""";}
/*Removeannoyingborderonlinkedimages.*/
aimg{border:none;}
/*
GoldenGrid-CSSLibrary
Author:VladimirCarrer
*/
/*CSSGrid*/
.main{margin:0auto;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;}
/*6columns*/
.g160{width:150px;}
.g320{width:310px;}
.g480{width:470px;}
.g640{width:630px;}
.g800{width:790px;}
.g960{width:950px;}
/*12columns*/
.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"lucidagrande","lucidasansunicode",sans-serif;}
p{padding:001em0;color:#111;}
p.first:first-letter{float:left;font-family:Palatino,PalatinoLinotype,Georgia,sans-serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em0.1em00;}
pimg{float:left;margin:0.3em0.833em0.833em0;padding:0;}
pimg.right{float:right;margin:0.3em00.833em0.833em;}
h1,h2{font-weight:normal;color:#333;font-family:Georgia,"TimesNewRoman",serif;}
h3,h4,h5,h6{font-weight:normal;color:#333;font-family:Georgia,"TimesNewRoman",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;}
/*Colorpalete*/
.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;}
liul,
liol{margin:01.5em;}
ul,ol{margin:01.5em1.5em1.5em;}
dl{margin:001.5em0;}
dldt{font-weight:bold;}
dldd{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:01.5em01em;height:18px;}
tfoot{font-style:italic;}
caption{text-align:center;font-family:Georgia,serif;}
abbr,acronym{border-bottom:1pxdotted#000;}
address{margin-top:1.5em;font-style:italic;}
del{color:#000;}
blockquote{padding:1em1em1em1.5em;font-family:baskerville,"palatinolinotype",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;}/*FromTripoli*/
strong{ont-weight:bold;}
em,dfn{font-style:italic;}
dfn{font-weight:bold;}
pre,code{margin:1.5em0;white-space:pre;}
pre,code,tt{font:1emmonospace;line-height:1.5;}
tt{display:block;margin:1.5em0;}
hr{margin-bottom:1.5em;}
/*othersmallthings*/
.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:01em1em1em;color:#111;}
pimg.right10{float:right;margin:0.833em;}
.oldbook{font-family:"BookAntiqua","WarnockPro","GoudyOldStyle","Palatino",Georgia,serif;}
.note{font-family:Georgia,"TimesNewRoman",Times,serif;font-style:italic;font-size:0.9em;margin:0.1em;color:#333;}
.mono{font-family:"CourierNew",Courier,monospace;}
/*CSSActionFramework*/
/*Onmou搜索引擎优化ver*/
.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:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#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;
}
/*OnClick*/
.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:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#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:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#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>
<divclass="main">
<divclass="g960">
<h1>Action:hover摘自：<ahref="http://wwwpoluoluo.com">www.poluoluo.com</a></h1>
<h5class="note">LookManoJavaScript</h5>
<br/>
</div>
<divclass="clear"></div>
<divid="a"class="g160h-scale"style="border:2pxsolidred;height:150px">鼠标过去缩小</div>
<divclass="clear"></div>
<divid="b"class="g160h-translate"style="border:2pxsolidred;height:150px">鼠标过去移位</div>
<divclass="clear"></div>
<divid="c"class="g160h-rotate"style="border:2pxsolidred;height:150px">鼠标过去扭转45度</div>
<divclass="clear"></div>
<divid="d"class="g160h-box-shadow"style="border:2pxsolidred;height:150px">鼠标过去投影效果</div>
<divclass="clear"></div>
<divid="e"class="g160h-multitransform"style="border:2pxsolidred;height:150px">鼠标过去扭转</div>
<divclass="clear"></div>
<divid="f"class="g160h-hide"style="border:2pxsolidred;height:150px">鼠标过去渐渐变淡</div>
<divclass="clear"></div>
</div>
</body>
</html>
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 22:58:36
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜