发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车。 <!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>css3 大风车</title><style>*{margin:0; padding:0}.windmill{ padding:10px; width:400px; height:400px; position:relative;animation-name:moveWindmill;animation-duration:4s;animation-timing-function:linearanimation-delay:0;animation-iteration-count:infinite;animation-play-state:running;/* Firefox: */-moz-animation-name:moveWindmill;-moz-animation-duration:4s;-moz-animation-timing-function:linear;-moz-animation-delay:0;-moz-animation-iteration-count:infinite;-moz-animation-play-state:running;-webkit-animation-name:moveWindmill;-webkit-animation-duration:4s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;-ms-animation-name:moveWindmill;-ms-animation-duration:4s;-ms-animation-timing-function:linear;-ms-animation-delay:0;-ms-animation-iteration-count:infinite;-ms-animation-play-state:running;}.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000); background: -webkit-radial-gradient(right, circle,red , #000);}.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }.windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}@keyframes moveWindmill /* Firefox */{ 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)}}@-ms-keyframes moveWindmill /* Firefox */{ 0% { -ms-transform: rotate(0deg)} 25% { -ms-transform: rotate(90deg)} 50% { -ms-transform: rotate(180deg)} 75% { -ms-transform: rotate(270deg)} 100% { -ms-transform: rotate(360deg)}}@-webkit-keyframes moveWindmill /* Firefox */{ 0% { -webkit-transform: rotate(0deg)} 25% { -webkit-transform: rotate(90deg)} 50% { -webkit-transform: rotate(180deg)} 75% { -webkit-transform: rotate(270deg)} 100% { -webkit-transform: rotate(360deg)}}@-moz-keyframes moveWindmill /* Firefox */{ 0% { -moz-transform: rotate(0deg)} 25% { -moz-transform: rotate(90deg)} 50% { -moz-transform: rotate(180deg)} 75% { -moz-transform: rotate(270deg)} 100% { -moz-transform: rotate(360deg)}}</style></head><body><div class="windmill"><div class="red"></div><div class="yellow"></div><div class="blue"></div><div class="green"></div><div class="dot"></div></div></body></html> ffcod = delpost.runcode5 .value; ffcod = ffcod.replace(/<br \/>/g,''); delpost.runcode5 .value = ffcod; 提示:您可以先修改部分代码再运行HTML: 复制代码代码如下: <div class="windmill"> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> <div class="green"></div> <div class="dot"></div> </div> 实现过程:首先来一个容器里面四个风扇、 一个中心点 结构很简单,使用绝对分别定好位。然后再使用border-radius把风扇矩形变成半圆,形状就有了,再分别给其上色,红黄蓝绿四种渐变颜色。最后给容器加个animation使整个容器开始旋转即可。 CSS: 复制代码代码如下: .windmill{ padding:10px; width:400px; height:400px; position:relative; animation-name:moveWindmill; animation-duration:4s; animation-timing-function:linearanimation-delay:0; animation-iteration-count:infinite; animation-play-state:running; /* 动画: */ -moz-animation-name:moveWindmill; -moz-animation-duration:4s; -moz-animation-timing-function:linear; -moz-animation-delay:0; -moz-animation-iteration-count:infinite; -moz-animation-play-state:running; -webkit-animation-name:moveWindmill; -webkit-animation-duration:4s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0; -webkit-animation-iteration-count:infinite; -webkit-animation-play-state:running; -ms-animation-name:moveWindmill; -ms-animation-duration:4s; -ms-animation-timing-function:linear; -ms-animation-delay:0; -ms-animation-iteration-count:infinite; -ms-animation-play-state:running; } .windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;} .windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000); background: -webkit-radial-gradient(right, circle,red , #000); } .windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);} .windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); } .windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }.windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);} @keyframes moveWindmill /* Firefox */ { % { -ms-transform: rotate(0deg)} % { -ms-transform: rotate(90deg)} % { -ms-transform: rotate(180deg)} % { -ms-transform: rotate(270deg)} % { -ms-transform: rotate(360deg)} } @-ms-keyframes moveWindmill /* ms*/ { % { -ms-transform: rotate(0deg)} % { -ms-transform: rotate(90deg)} % { -ms-transform: rotate(180deg)} % { -ms-transform: rotate(270deg)} % { -ms-transform: rotate(360deg)} } @-webkit-keyframes moveWindmill /*webkit*/ { % { -webkit-transform: rotate(0deg)} % { -webkit-transform: rotate(90deg)} % { -webkit-transform: rotate(180deg)} % { -webkit-transform: rotate(270deg)} % { -webkit-transform: rotate(360deg)} } @-moz-keyframes moveWindmill /* Firefox */ { % { -moz-transform: rotate(0deg)} % { -moz-transform: rotate(90deg)} % { -moz-transform: rotate(180deg)} % { -moz-transform: rotate(270deg)} % { -moz-transform:

要实现框架窗口的关联,关键在于设置超链接的"target"目标窗口的属性,例子如下: 一、为右侧框架窗口添加"name"标识,如下 <frame src="right.html" name="rightFrame"/> 二、在左侧窗口中,设置"target"属性显示的窗口名,如下:

HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法。这样的设计有时会带来很大的不便,《JavaScript权威指南》的作者David Flanagan就认为这样的决定是有问题的,尤其是在标准的修改和实现都比较简单的情况下 (“…something that is so trivial to add to the specification and so trivial to implement… I really think you’re making a mistake here” — http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011224.html)。在Stack Overflow上,Phrogz提供了一个自己的画虚线的实现(http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas),严格的说,这是一个点划线的实现(p.s. 我认为该页面上Rod MacDougall的简化版更好)。那么,如果需要画圆点虚线(如下图所示),应该怎么办呢?以下是我自己的实现,只支持画水平的和垂直的圆点虚线,可以参考Phrogz与Rod MacDougall的方法来添加斜线描画的功能。复制代码代码如下:var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;canvasPrototype.dottedLine = function(x1, y1, x2, y2, interval) { if (!interval) { interval = 5; } var isHorizontal=true; if (x1==x2){ isHorizontal=false; } var len = isHorizontal ? x2-x1 : y2-y1; this.moveTo(x1, y1); var progress=0; while (len > progress) { progress += interval; if (progress > len) { progress = len; } if (isHorizontal) { this.moveTo(x1+progress,y1); this.arc(x1+progress,y1,1,0,2*Math.PI,true); this.fill(); } else { this.moveTo(x1,y1+progress); this.arc(x1,y1+progress,1,0,2*Math.PI,

大家一定曾经把别人的网页另存下来看过,特别是用dw打开时,你会看到,很多网页上面都加了<tbody>这个标签,在dw中黄黄的很是显眼,那么<tbody>是个什么东东呢?   用TBODY这个标签可以控制表格分行下载,可以让其中的内容比网页中别的东东(如图片)先下载下来,这样可以让别人先看到网页的实质性的内容,不用等那么久了,在需要分行下载处加上<tbody>和</tbody>,比如: 复制代码代码如下: <table> <tbody> <tr><td>飞鸥岛</td></tr> <tr><td>飞鸥岛</td></tr> </tbody> <tbody> <tr><td>飞鸥岛</td></tr> <tr><td>飞鸥岛</td></tr> </tbody> </table> tbody 标签的用法 IE单独推出的并得到HTML3.0规范支持的表格属性有: <THEAD> - specifies the Table head <TBODY> - specifies the Table body <TFOOT> - specifies the Table footer <COLGROUP> - used to group column alignments <COL> - used to specify individual column alignments 以下是我作的一个例子,比较烦,朋友们可以看一下。这些属性的主要用途还是在SCRIPT驱动的动态效果时才能反映出来。 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </HEAD> <BODY BGCOLOR="#FFFFFF"> <TABLE BORDER FRAME=hsides RULES=cols> <COL ALIGN=left> <COLGROUP SPAN=3 ALIGN=center VALIGN=middle> <THEAD BGCOLOR="#FF0000"> <CAPTION ALIGN=center><FONT SIZE=+1><B> A section of the Comparison Table</B></FONT> </CAPTION> <TR> <TD><B>Element<B></TD><TD><B>Internet Explorer</B></TD> <TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD> </TR> </THEAD> <TBODY BGCOLOR="#33CCFF"> <TR> <TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD><BASE ...></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD><BASEFONT ...></TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD VALIGN=top> ...SIZE</TD><TD>X<FONT SIZE=-1> (only visiblewhen FONTSIZE= used as well)</FONT></TD><TD VALIGN=top>X</TD> <TD></TD> </TR> <TR> <TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD> </TR> <TR> <TD VALIGN=top><BGSOUND ...></TD><TD VALIGN=top>X</TD> <TD></TD><TD>X<FONT SIZE=-1>(will spawnplayer for .mid files)</FONT></TD> </TR> </TBODY> <TFOOT BGCOLOR="#6699CC"> <TR> <TD> ...</TD><TD>[...</TD><TD>...]</TD><TD>...</TD> </TR> <CAPTION ALIGN=BOTTOM><FONT SIZE=+1><B> This is <TFOOT> content</B></FONT> </CAPTION> </TFOOT> </TABLE> </BODY> </HTML> tbody据说是加强对表格的控制能力的,但是经过我多次实验实在是没有什么用处。 ================================= 一、DW根本就不生成 tbody 代码 二、DW根本就不认 tbody 代码 ================================= tbody代码如果不是你用手写的话只有在你用IE5打开一个网页的时候,把它另存为一下的时候,你的另存为的文件的表格就会生成tbody代码。(即便你的表格根本就没有tbody代码,IE5另存为时也会给你生成)你可以做一个表格,用ie打开然后另存为,看你另存为的文件的代码。(罗嗦了!!!) ================================= 可以认为只有IE5+才能认tbody ================================= 我不知道FP能不能生成tbody。我没用过。

CSS Filter 是 IE 特有的技术,其他浏览器均不支持,所以为了最大的兼容性及标准化,应尽量避免为 IE 单独使用 Filter,如需要其某些特效,应同时考虑其他浏览器, 图片渐变 复制代码代码如下: <img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)"> 表格渐变 复制代码代码如下: <table style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=100); BACKGROUND-COLOR: #ff0000"> <tr><td>12345678901234567890</td></tr></table> 背景渐变 复制代码代码如下: .bgjb{ background:-webkit-gradient(linear,left,right,from(#BDD4FD) ,to(#FFFFFF)); background:-moz-linear-gradient(left,#BDD4FD,#FFFFFF,); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD4FD, endColorstr=#FFFFFF,GradientType=1 ); }/*同时考虑其他浏览器, <div class="bgjb"></div> <body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue"> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" > <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" > <div style="width:66;height:100%;float:left;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div> <div style="width:66;height:100%;float:left;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#ffffFF,endColorStr=#46B5FF)"></div> <div style="width:66;height:100%;float:right;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#ffffff,endColorStr=#46B5FF)"></div> <div style="width:66;height:100%;float:right;FILTER: progid:DXImageTransform.Microsoft.Gradient (gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div> 若要使表格里面的元素不受影响 给里面的元素加上style="position:relative;"属性, 这样就不受影响了例如: 复制代码代码如下: [html] <div style="width:200px;height:200px;filter: Alpha(opacity=10);background-color:red;"> <div style="position:

分类:网页制作

时间:2016-06-05 07:21:02