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結合的更緊密，有時間學習一下的話就可以製作更好的效果。