CSS3网页制作教程:Action:hovert

文章简介：CSS3实现多种Action:hovert效果。

<!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 webjx.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://wwwwebjx.com">www.webjx.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>

 

时间： 2024-11-29 19:27:47

CSS3网页制作教程:Action:hovert的相关文章

CSS3网页制作教程:闪烁跳跃的进度条

文章简介:今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 这个示例的原理和以前的都是一样的,都是通过大量的css3属性来实现的,如:animation.transform.keyframes等等属性.值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出.相信这个伪类选择符在将来会是一个很强大的一个工具.推荐大家多多了解以及实践使用. 这个伪类选择符E:

CSS3网页制作教程:详解CSS3实现圆角代码

文章简介:其实CSS3实现圆角的方法只需要设置一个属性:border-radius(边框半径),只要设置一个值就能同时设置四个圆角的半径. 其实CSS3实现圆角的方法只需要设置一个属性:border-radius(边框半径),只要设置一个值就能同时设置四个圆角的半径 给你一个DIV 设置他的圆角半径:border-radius:15px: border-radius可以同时设置1到4个值.如果设置1个值,表示4个圆角都使用这个值.如果设置2个值,表示左上角和右下角使用第1个值,右上角和左下角使用

CSS3网页制作教程:overflow属性超过一行显示省略号

文章简介:overflow属性应用-不换行,超过一行显示省略号. overflow属性-原本是ie浏览器独自开发的属性,由于在css3中被采用,得到了其他浏览器的支持. 指定对于盒内容纳不下的内容显示的方法. Overflow:hidden 对于超出容纳范围的文字会被隐藏. Overflow:scroll div元素出现固定的水平滚动条与垂直滚动条 Overflow:auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条 Overflow:visible 则显示效果与不使用overflo

《ASP网页制作教程》笔记

笔记|教程|网页 <ASP网页制作教程>.王国荣 编著,人民邮电出版社. 打开MDB数据库的方法:先定义一个OpenMDB子程序,然后在主程序中调用.<%Option ExplicitSub OpenMDB(dbname,pwd,conn)'dbname-数据库文件的相对路径,pwd-数据库文件的密码,conn-用户定义的Connection对象.'对于没有密码的数据库,pwd值可任意.dim connstrSet conn = Server.CreateObject("ADO

CSS3网页制作实例教程:网页图片遮罩效果

文章简介:巧用CSS3 border制作图片遮罩效果. <!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

Dreamweaver网页制作教程：超级链接

  超级链接 作为网站肯定有很多的页面,如果页面之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的.为了建立起网页之间的联系我们必须使用超级链接.称"超级链接",是因为它什么都能链接,如:网页.下载文件.网站地址.邮件地址--等等.下边我们就来讨论怎样在网页中创建超级链接. [页面之间的超级连接] 在网页中,单击了某些图片.有下划线或有明示链接的文字就会跳转到相应的网页中去. 1.在网页中选中要做超级链接的文字或者图片. 2.在属性面板中单击黄色文件夹图标,在弹出的对话框里

Dreamweaver网页制作教程：表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

Dreamweaver网页制作教程：定义站点

dreamweaver|教程|网页|站点 Web 站点是一组具有如相关主题.类似的设计.链接文档和资源.Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点.创建 Web 站点的第一步是规划.为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划.决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的. 请执行以下操作: 启动 Dreamweaver MX 2004:

CSS网页制作教程:CSS文字单位PX、EM、PT

文章简介:但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点.这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了.原因可能是IE处理汉字时,对于浮点的取值精确度有限.不知道有没有 其 这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很