css3电影字幕效果

Ⅰ webgl和css3的3d有什么不同

webgl可以用js调用openGL的，比如cs、极品飞车之类的游戏你应该知道，很多游戏都是openGL的，真正类似3D软件那种3D，里面有X,Y,Z轴向，构成一个立体空间，然后你可以放入一个人物、汽车或其他3D模型，上贴图，打灯光，游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面，openGL与3D软件渲染大原理是一样的，只是渲染精度没3D软件做图或做电影那么高，渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制，要保证游戏在主流的家庭电脑硬件上不卡。

css只有X，Y两个轴向，只能构成一个平面，不能构成一个真正的立体空间，你看到的网上css做的3D立方体的例子原理类似：ps里面你画三个正方形平面色块，通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面，这个是视觉上的欺骗，只能拼凑出简单的立体形状，css并没有在一个3D空间内生成带三个轴向的物体，也没办法通过css导入真正的3D模型来个转一圈之类的，你想用纯css做个3D机器猫就不行了。

如果是webgl，你可以建个机器猫模型，把obj格式的模型文件导入，然后指定贴图，灯光等等，加上js代码控制，可以在支持的浏览器上360角度的展示机器猫了。webgl原理就和游戏引擎一样(目前肯定没游戏引擎强大)，只不过游戏引擎是用c++之类的来开发，展示的东西基本上都需要用户执行一个安装到本地电脑的过程，现在webgl你可以用js来开发，然后直接在浏览器上展示。

Ⅱ 我在做移动端时遇见的css问题

关于css常见问题，大多是移动端的。

简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。

条目编号后面紧跟英文字母的，要空一格，比如 4. css，“4.”和“css”之间有一个空格。

一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了100%），会出现滚动条。

二、在移动端有3种布局可选。

1.定位布局

说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto；

2. flex布局（朕极力推荐）

说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓5.1以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。）

3.普通的流式布局

说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。

三、css属性

1. word-wrap:break-word； word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。

2. -webkit-user-select:none | normal | text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。 所以在使用这个属性时，注意防止对input和select的污染。

3. css3属性选择器。li[class*='act']，可以选中所有class中有‘act’的li元素。

$('li').attr('class').indexOf('act'); 只是获取第一个li的class，然后判断是否有‘act’;

通过for循环可以进一步操作，

for(var i = 0; i < $("li[class*='act']").length; i++){

$("li[class*='act']")[i] . . .

}

4.清除浮动，解决高度塌陷

a.伪类(抄袭bootstrap的做法)

.clearfix{}

.clearfix:after{ display:table; content:' '; clear:both; }

b.王妮的做法

.box{ clear:both; overflow:hidden; }

c.对于子元素写margin-top把父级拖下来的情况

（网络说是W3C的标准，只要破坏了父级子级紧贴的结构就可以了）

给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。

5. css高度单位和颜色单位

height:calc（100vh - 200px）; 目前来看，兼容性还不错。注意，减号两边是有空格的。

background:rgba（255，255，255，0.5）; rgb颜色值 和 颜色透明度。

6.关于 padding-top:100%; padding-left:100%;

可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格，qq空间的照片9宫格，sina微博的照片9宫格。屏幕宽度未知，一行排3个，每个宽度都是33.33333%，但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div，这个div的默认宽度就是父级的33.33333%，再用padding-top:100%;把高度撑开，padding-top:%;就是根据已有宽度计算，padding-top:100%;padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute;一个div，width:100%; height:100%;然后在这个div里面布局就好。

每个正方形的间距可以用qq空间的2px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。

qq空间是js插件写进去的，最大宽度是290px，高度是根据最大宽度计算出来的。

7. 0.5px的线

a.发现qq空间的细线，兼容2倍屏和3倍屏

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.5);

-moz-transform: scaleY(.5);

-ms-transform: scaleY(.5);

-o-transform: scaleY(.5);

transform: scaleY(.5)

}

.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

transform-origin: 100% 0

}

.action.flex:after,.action.flex>.btn:after,.feed .source:after {

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%

}

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.6666);

-moz-transform: scaleY(.6666);

-ms-transform: scaleY(.6666);

-o-transform: scaleY(.6666);

transform: scaleY(.6666)

}

}

@media only screen and (-webkit-device-pixel-ratio: 3) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.33);

-moz-transform: scaleY(.33);

-ms-transform: scaleY(.33);

-o-transform: scaleY(.33);

transform: scaleY(.33)

}

}

b. weui的作法是

.weui-cells:after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #e5e5e5;

color: #e5e5e5;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

8.背景图片尺寸background-size，img标签object-fit，object-position。

background-size:contain | cover | auto 90% | 50% auto;

这是以背景图的方式展示图片的，如果用img元素的话，

object-fit:fill | contain | cover | none | scale-down;（和background-size效果类似）

object-position:center; 和background-position的取值一样。

这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。

9.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（ios上，安卓上没测）。

-webkit-touch-callout:none;

10.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:35px; height:35px;

在用appcan做hybrid app时，发现在华为meta8上，用 ul li 做九宫格，li 浮动排在一行时，每个 li 有文字，高度用li的行高撑开的，没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在3行，有格子掉下去了，排成了4行。所以，在用行高让文字居中时，高度和行高要都写上。

11. text-align:justify;

p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。

可以利用这个属性不处理最后一行的特性，做这种布局：

上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级 ul 写 font-size:0；就能把底部留白去除了，然后给子代再写font-size:14px;就可以了。 但是，text-align:justify;毕竟是处理空格（拉伸空格来使内部元素水平分散），所以在html中，li 要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。

12.去除-webkit-的滚动条

#content::-webkit-scrollbar{ display：none; }

设置滚动条样式

/*滚动条宽度*/

#content::-webkit-scrollbar{ width:5px; }

/*滚动条滑块*/

#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }

/*滚动条的整个背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

TGuide

/* scrollbar */

::-webkit-scrollbar{width:10px;height:10px}

::-webkit-scrollbar-button{display:none}

::-webkit-scrollbar-track{background-color:black}

::-webkit-scrollbar-track-piece{background:#FFF}

::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}

::-webkit-scrollbar-corner{background-color:#535353}

/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/

前面不加选择器表示，所有出现滚动条的元素。

13.设置placeholder的样式

input::-webkit-input-placeholder{ color:#999; }

input::-moz-input-placeholder{ color:#999; }

input:-ms-input-placeholder{ color:#999; }

注意 -ms- 前面是一个 “ ：”。

14.移动端点击某一行 :active 时添加背景色，比如 li:active{ background:#eee; } 时，要给 body标签上写ontouchstart，否则没有效果。

另一方面，给body添加，可以阻止图片被默认拖拽。网络的logo就可以被拖拽。

15.pageshow（）和pagehide（）方法。

问题描述：A页面跳转到B页面，在B页面操作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改操作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。

解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（）方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（）顾名思义。

16.关于position。

华为meta7，安卓版本4.4.2，position:relative; 的元素比position:absolute; 的元素层级要高。网络新闻的导航效果，也是利用了这个。很奇怪。

这种结构，i.line是absolute，每个div都是relative，安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。

解决办法是，把 i.line 拿出来，和div同级。

17. background:url() no-repeat center, url() no-repeat center; 可以一次性放两个图片，中间用逗号隔开。

18.关于移动端软键盘弹起，盖住页面的问题。

核心解决办法是利用 document.activeElement.scrollIntoView(false); 参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。

另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded(); 这个方法效果不是很好，没有上面那个好用。

19.常见于小说、报纸排版的column布局。

常用的5个属性有4个是知晓效果的：

column-width:; 每列的宽度。

column-gap:; 列与列之间的间距。

column-fill:; 不知有何软用。

column-rule:; 列与列直接的分割线，与border属性效果一样。

column-count:; 总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度800px，height:200px; column-width:400px; column-count:4; 显然，800px最多只能分2列，所以优先以column-width进行计算。）

小兼容：ios上，横向滚动 overflow-x:auto; 的容器不适合直接当成分栏布局的容器，应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成0，列与列之间的间距可以用分栏布局的子元素的左右padding来做。

大段文字

.box{ width:300px; height:14em; overflow-x:auto; } /*滚动的容器*/

.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分栏的容器*/

.col > p{ padding:0 .5em; line-height:1.2; } /*文字内容的容器，加左右padding以增加列与列之间的间距。*/

四、貌似很多webapp都会写两个meta标签

不确定是否支持16进制的颜色值。（好像测试过，16进制颜色没有效果。在appcan里也没有效果。）

五、 一般不能上传相同图片

可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。

六、在安卓上touchmove出现了神奇的bug，网络上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。

解决方法是：在touchmove里写e.preventDefault();即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。

七、flex布局

1. 2012年以后的版本

给父级添加 display:-webkit-flex; display:flex;

flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。

flex盒子内的子元素可以被作项目。

注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。

a.作用于父级的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

//子元素的排列方向

flex-direction:row（默认值，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）;

//子元素是否换行

flex-wrap:nowrap（默认值，不换行） | wrap（换行） | wrap-reverse（换行，但第一行在下方）;

//子元素排列方向和子元素是否换行的简写

flex-flow:row nowrap;（默认值，从左到右，不换行。）

//项目（子元素）在主轴上的对齐方式

justify-content:flex-start（默认值，以起点为始） | flex-end（以终点为始） | center（居中） | space-between（首尾两个元素紧贴边界，其余元素之间间隔相等） | space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。）;

//项目（子元素）在交叉轴上的对齐方式

align-items:flex-start（以起点为始） | flex-end（以终点为始） | center（居中） | baseline（与项目的第一行文字的基线对齐） | stretch（默认值，在交叉轴方向撑满父级）;

//多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

align-content:flex-start（与交叉轴的起点对齐） | flex-end（与交叉轴的终点对齐） | center（与交叉轴的中点对齐） | space-between（与交叉轴两端对齐，轴线之间的间隔平均分布） | space-around（每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍，第一行和最后一行不会紧贴边框） | stretch（默认值，铺满整个交叉轴）;

（ align-content：stretch; 第一根轴线与边框对齐，其他轴线均分父级间隙。 ）

b.作用于项目（子元素）的6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

//子元素的排列顺序

order:0（默认值） | 1 | 2 | 3 . . .

//项目（子元素）的放大比例

flex-grow:0（默认值，默认不放大，尽管有剩余空间） | 1 | 2 | 3 . . .

//项目的缩小比例

flex-shrink:1（默认值，当空间不足时，该项目将缩小） | 0（不论如何，都不缩小）;

//项目占据的主轴空间

flex-basis:auto（默认值，项目本来的大小） | 固定值（200px，50%，100% . . .）;

//flex-grow，flex-shrink，flex-basis的简写 flex ：0 1 auto；

flex:0 1 auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小）;

flex:auto; => flex：1 1 auto; 根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析 flex：auto; -- flex：1 1 auto; 但 IE 就搞笑了，IE10解析出来的flex：auto -- flex：1 0 auto；只放大，不缩小。IE11解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。）

flex:none； -- flex：0 0 auto；不放大，也不缩小。

//单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items;

align-self:auto（默认值， 继承父级的align-items的值） | flex-start | flex-end | center | baseline | stretch; 除了auto，其他的与父级align-items属性一致。

注意要活用align-self：stretch;和align-items：stretch;

2. 2009年的版本

目前新版本被支持的很好，所以旧版的直接写带前缀的。

display:-webkit-box; display:-ms-flexbox;

子元素如果有display：inline的，要把子元素写成display：block; 2012年的版本不需要。

a.父级的5个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。

//项目在主轴上的对齐方式

-webkit-box-pack:start（默认值，从起点开始） | end | center | justify;

//项目在交叉轴上的对齐方式

-webkit-box-align:stretch（默认值，交叉轴方向撑满父级） | start | end | center | baseline;

//项目的排列顺序

-webkit-box-direction:normal（默认值，以起点为始） | reverse（以终点为始）;

//主轴方向

-webkit-box-orient:horizontal（默认值，水平方向） | vertical（垂直方向） | inline-axis（行内方式，映射为horizontal） | block-axis（块方式排列，映射为vertical）;

//项目（子元素是否换行）

box-lines:single（默认值，不允许） | multiple（允许）;

经测试，没有浏览器支持，这个属性不能用。

b.子元素的3个属性。box-flex，box-flex-group，box-ordinal-group。

//是否缩放

-webkit-box-flex:0（默认值，不放大也不缩小） | 1 | 2 | 3 . . .;

//子元素排列次序

-webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。

3. 对 1、2 的小结。

2012年版本比2009年的版本主要多了两个属性，1个是子元素是否换行，flex-wrap，2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，2012年的justify-content:space-around; 2009年的没有这个效果，但是可以通过加左右padding值的方式做到。

如果要兼容2009年版本的盒子布局又想换行的，只能改用float布局。

八、html结构嵌套问题

p标签内不要嵌套块元素，其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。

类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。

html标签嵌套要按照块元素包含行间元素的规则来写。

九、标签

让浏览器用最新内核渲染。

十、form标签一点特性

在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写：

说明：onsubmit='return false';阻止表单默认提交，便于自己操作。

input 的 type 必须是 search。

input 的 加了style='position：relative;'，防止ios上点击搜索按钮会闪屏（白屏）。

十一、浏览器兼容

1.关于table表格的宽度设置问题。

Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。

2.某些安卓不识别height:calc（）; 可以用flex布局代替。

十二、KTV字幕效果

实现方式1：

把文字写两遍，两个行间元素span，包裹相同的文字。

首页

首页

或者

首页

首页

实现原理是：让内部两个span宽度相等，其中一个设置width:0%；overflow:hidden; 然后用js动态控制width从0% -- 100%。

实现方式2：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。）

实现原理：background-image是覆盖在background-color上的，chrome有个私有属性 -webkit-background-clip:text; 意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent; 将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。

核心的css属性：

background-image:url(); /*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/

background-repeat:no-repeat;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-position:0 0;

↑改变他就可以了。

关于实现方式2的图示：

Ⅲ css3 怎么实现电影带播放的效果图

诶。。有没有效果图？

Ⅳ html5 有哪些变动的地方，淘汰了哪些东西。有什么好处

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。
1、取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。
HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。
2、将内容和展示分离
b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。
3、一些全新的表单输入对象
包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
4、全新的，更合理的Tag
多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。
5、本地数据库
这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
6、Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。
7、浏览器中的真正程序
将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。
8、Html5取代Flash在移动设备的地位。
重要标记
<video>标记
定义和用法：
<video> 标签定义视频，比如电影片段或其他视频流。
<audio> 标记
定义和用法
<audio> 标签定义声音，比如音乐或其他音频流。
实例：
一段简单的HTML 5 音频
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
<canvas> 标记
定义和用法：
<canvas> 标签定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Ⅳ html5用什么来代替 marquee制作滚动字幕呢

由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了.H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。

下面是js实现代码：

body{
margin:0px;
font-size:12px;
color:#938C43;
line-height:150%;
text-align:center;
}
a:link{color:#9D943A;font-size:12px;}
a:hover{color:#FF3300;font-size:12px;}
a:visited{color:#9D943A;font-size:12px;}
a.red:link{color:#ff0000;font-size:12px;}
a.red:hover{color:#ff0000;font-size:12px;}
a.red:visited{color:#ff0000;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1pxsolidsilver;padding:1px;text-align:center;margin:0auto;}
-->
</style>
</head>

<body>
<h4>滚动新闻</h4>
<scriptlanguage="JavaScript"type="text/javascript">
varmarqueeContent=newArray();
marqueeContent[0]="<ahref=http://xyq.163.com/news/2006/11/2-2-20061102170913.htmltarget=_blank>用快速取回帐号密码</a>";
marqueeContent[1]="<ahref=http://ekey.163.com/target=_blank>网易将军令官方网站</a>";
marqueeContent[2]="<ahref=http://xyq.163.com/download/wallpaper.htmtarget=_blank>最新壁纸下载</a>";
marqueeContent[3]="<ahref=http://xyq.163.com/download/around.htmtarget=_blank>最新屏保下载</a>";
varmarqueeInterval=newArray();
varmarqueeId=0;
varmarqueeDelay=2000;
varmarqueeHeight=20;
functioninitMarquee(){
varstr=marqueeContent[0];
document.write('<divid="marqueeBox"style="overflow:hidden;width:250px;height:'+marqueeHeight+'px"onmouseover="clearInterval(marqueeInterval[0])"onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
functionstartMarquee(){
varstr=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length)marqueeId=0;
if(document.getElementById("marqueeBox").childNodes.length==1){
varnextLine=document.createElement('DIV');
nextLine.innerHTML=str;
document.getElementById("marqueeBox").appendChild(nextLine);
}
else{
document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
document.getElementById("marqueeBox").scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
functionscrollMarquee(){
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>

</body>

Ⅵ CSS3 动画

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。
CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；

transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：

none 表示不做变换； <transform-function> 表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：

所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等;

扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；

它是来设置过渡效果的速率，它有6种形式的速率：

它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；

它是 transition-property 、 transition-ration 、 transition-timing-function 、 transition-delay 的简写：

animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：

它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：

和 transition-timing-function 类似：

它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：

它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：

它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：

它是 animation-name 、 animation-ration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。

Ⅶ css3过渡和动画的区别详解

一、CSS3 过渡

transition

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition-property：检索或设置对象中的参与过渡的属性

transition-ration：检索或设置对象过渡的持续时间

transition-delay：检索或设置对象延迟过渡的时间

transition-timing-function：检索或设置对象中过渡的动画类型

贝塞尔曲线：

属性值：cubic-bezier()

贝塞尔曲线网址：http://cubic-bezier.com/

简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

最简写：transition:运动时间s/ms

案例：悬停div,让p标签沿着x方向发生位移

浏览器兼容处理

三、animation和transition的区别

相同点：都是随着时间改变元素的属性值。

不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性; 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

Ⅷ 如何用css3制作相册翻页效果

用css3制作纸张效果
一、中规中矩的效果
所谓“中规中矩的效果”就是加个投影，贴个胶带什么的。效果如下：
CSS3的box-shadow投影效果，相关代码如下：
代码如下:
-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
反而是上面的胶带纸效果有点说头，这些微微倾斜的胶带是CSS写出来的，大部分效果源自CSS3，主要有RGBA显示半透明背景色，box-shadow显示淡淡的投影，transform做旋转效果；元素使用after伪类生成，完整代码如下：
代码如下:
.page:after { width: 180px; height: 30px; content: " "; margin-left: -90px; border: 1px solid rgba(200, 200, 200, .8); background: rgba(254, 254, 254, .6); -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); position: absolute; left: 50%; top: -15px; }
老外似乎很喜欢使用before和after伪类，国外最近的些教程，技术点等经常见到此玩意。我个人感觉有跟风之嫌，就像是狂热的经济泡沫，不需 要太久，大家会冷静下来重新审视这些曾经上手简单，自我感觉不错的方法。由于目前IE6/7不支持before/after类，所以，某种意义上来说，伪 类的使用少了些兼顾IE下显示的烦恼。
二、外翻卷角纸张效果
纸张一般都是有卷角的，所以，我们可以更近一步，模拟卷角效果来使得纸张的感觉更逼真，这里就要借助于投影了，且是曲线投影。
我们还可以给纸张增加渐变(gradient)效果，以模拟纸张的曲度。
同时，可以给文字增加投影，可以让文字有书写的凹陷感，可以进一步让纸张效果更逼真。
于是，在“中规中矩”纸张基础上，我们做点小手术，结果得到下面的效果：
您可以狠狠地点击这里：渐变卷边纸张效果demo
目前貌似opera浏览器还不支持CSS3渐变，同时webkit核心下浏览器下的gradient渐变的写法已经开始向FireFox浏览器靠拢了。确实，都是CSS3，有必要搞得五花八门吗？
相关渐变CSS代码如下：
代码如下:
background:-moz-linear-gradient(top, #f4f39e, #f5da41 60%, #fe6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f39e), to(#fe6), color-stop(.6, #f5da41));
在60%的位置有个颜色拐点。
关于弧形的投影，也是使用:before/:after伪类实现的，相关代码如下：
代码如下:
.page:before { -webkit-transform: skew(-15deg) rotate(-5deg); -moz-transform: skew(-15deg) rotate(-5deg); -o-transform: skew(-15deg) rotate(-5deg); transform: skew(-15deg) rotate(-5deg); left: 15px; } .page:after { -webkit-transform: skew(15deg) rotate(5deg); -moz-transform: skew(15deg) rotate(5deg); -o-transform: skew(15deg) rotate(5deg); transform: skew(15deg) rotate(5deg); right: 15px; } .page:before, .page:after { width: 90%; height: 20%; content: ' '; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 22px; z-index: -1; }
要想查看效果的完整代码，demo页面查看源文件即可，脱光光，一览无遗。
这里的曲线投影卷角效果支持Opera浏览器，如下截图：
三、带分隔线的卷纸纸张效果
上面的纸张卷角效果是通过曲线投影效果来模拟的，而这里，纸张的卷边效果是纸张真的“曲线化”了，而且，还是带隔线的纸张效果哦，您可以参见下面的效果截图(Chrome 9)：
这里，Firefox浏览器下的纸张隔线使用的是重复渐变(Repeating Gradients)实现的，对于webkit浏览器，使用的是background-size实现的。实际上，Firefox3.6+已经支持background-size属性了(-moz-background-size)， 所以，对于Firefox浏览器，这里使用重复渐变与渐变+background-size是等效的。在FireFox4以及IE9浏览器中 background-size属性已经没有私有属性了，Opera浏览器在9.5版本时候就已经支持background-size属性了，但是存在一 些bug。
这里分隔线实现的相关CSS如下：
代码如下:
background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 29px, #81cbbc 30px ); -webkit-background-size: 100% 30px;
而对于曲边的实现，使用的是border-radius圆角，这里展示下示意的代码：
代码如下:
border-bottom-left-radius: 20px 500px; border-bottom-right-radius: 500px 30px; border-top-right-radius: 5px 100px;
当然，FireFox浏览器下的写法不是如此，其bottom, left是连起来的，而不是”-”分隔，这里仅仅是示意，这里的微曲线是如何实现的。相信看到上面的代码就知道意思了，这里就不啰嗦了。
还有其他些细节，如如何控制行高让文字与隔线一一对应，这些您要是有兴趣可以去demo页面，通过查看元素等方法一看究竟。
四、最后点老生常谈
难免的，本文的重点在于CSS3，所以就本文而言，IE6/IE7/IE8浏览器就是过来打酱油的，且三个纸张效果从一而终，都是下面这副模样：
虽然没有透明胶效果，没有投影，没有卷边，更没有分隔线，但是，就功能上来讲，一点都不影响使用。所以，无论你是渐进增强还是退求其次，纸张投影效果在实际项目中的应该也不是不可以的，这就要看个人和团队的抉择了

Ⅸ 1.如何在Dreamweaver（CS6）的网页上插入滚动字幕，这个滚动字幕就像是Frontpag

Dreamweaver没有Frontpag滚动字幕、鼠标悬停等自动生成的特效。网页效果都是用代码形成的，如果你确实需要这两种特效，而又想在dreamweave里面编辑网页，可以在Frontpag中生成特效，然后把相应的代码拷贝到dreamweaver中再继续编辑页面。
Frontpag是一个很早的软件，其中的一些特效相对来说比较旧了。其实可以在网络上找一些更新的更好看的特效代码，拷贝到网页里使用替代旧特效。而Dreamweaver CS6或更新的版本对css3、html5、jquery结合的更紧密，有时间学习一下的话就可以制作更好的效果。