《網(wǎng)頁設計制作》課件-項目7_第1頁
《網(wǎng)頁設計制作》課件-項目7_第2頁
《網(wǎng)頁設計制作》課件-項目7_第3頁
《網(wǎng)頁設計制作》課件-項目7_第4頁
《網(wǎng)頁設計制作》課件-項目7_第5頁
已閱讀5頁，還剩54頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

《網(wǎng)頁設計制作》項目77.1音視頻標簽7.2CSS過渡7.3CSS變換7.4CSS動畫目

錄7.1音視頻標簽在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁面的標準方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應用程序置于頁面中。復雜冗長運用HTML5中新增的video標簽和audio標簽可以避免這樣的問題。運用HTML5的video和audio標簽可以在頁面中嵌入視頻或音頻文件，如果想要這些文件在頁面中加載播放，還需要設置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計算機內(nèi)播放或是處理音頻文件。7.1音視頻標簽使用video嵌入視頻基本語法格式：<videosrc="視頻文件路徑"controls="controls"></video><body><videosrc="video/pian.mp4"controls="controls">瀏覽器不支持video標簽</video></body>例如：使用video標簽來嵌入視頻7.1音視頻標簽使用video嵌入視頻瀏覽器添加的視頻控件，用于控制視頻播放的狀態(tài)播放進度條聲音全屏7.1音視頻標簽屬性值描述autoplayautoplay當頁面載入完成后自動播放視頻。looploop視頻結束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。posterurl當視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來。Video元素的其他屬性7.1音視頻標簽HTML5支持的視頻格式oggmpeg4webm7.1音視頻標簽使用audio嵌入音頻基本語法格式如下：<audiosrc="音頻文件路徑"controls="controls"></audio><body><audiosrc="music/1.mp3"controls="controls">瀏覽器不支持audio標簽</audio></body>例如：使用audio標簽來嵌入音頻7.1音視頻標簽使用audio嵌入音頻音頻控件，用于控制音頻文件的播放狀態(tài)播放進度條聲音7.1音視頻標簽audio元素的其他屬性屬性值描述autoplayautoplay當頁面載入完成后自動播放音頻。looploop音頻結束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。注意：以上列舉的audio元素的屬性和video元素是相同的，這些相同的屬性在嵌入音視頻時是通用的。7.1音視頻標簽HTML5支持的音頻格式oggmp3wav7.1音視頻標簽視頻音頻文件的兼容性問題雖然html5支持ogg、mpeg4和webm的視頻格式以及ogg、mp3和wav的音頻格式，但各瀏覽器對這些格式卻不完全支持。視頻格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0ogg

×支持支持支持

×mpeg4支持

×

×支持支持webm

×支持支持支持

×音頻格式ogg

×支持支持支持

×mp3支持

×

×支持支持wav

×支持支持

×支持7.1音視頻標簽在HTML5中，運用source元素可以為video元素或audio元素提供多個備用文件?；菊Z法格式<audiocontrols="controls"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> ……</audio>src用于指定媒體文件的URL地址。type指定媒體文件的類型。瀏覽器對音視頻文件的兼容性7.1音視頻標簽多學一招：調用網(wǎng)頁多媒體文件一種是調用本地多媒體文件（見教材），另一種是調用指定url地址的互聯(lián)網(wǎng)多媒體文件。例如：<videosrc="/i/movie.ogg"controls="controls">調用網(wǎng)絡視頻文件</video>【總結】7.1音視頻標簽控制視頻的寬高在HTML5中，經(jīng)常會通過為video元素添加寬高的方式給視頻預留一定的空間，這樣瀏覽器在加載頁面時就會預先確定視頻的尺寸，為其保留合適的空間，使頁面的布局不產(chǎn)生變化。注意：通過width和height屬性來縮放視頻，這樣的視頻即使在頁面上看起來很小，但它的原始大小依然沒變，因此在實際工作中要運用視頻處理軟件（如“格式工廠”）對視頻進行壓縮。7.1音視頻標簽7.1音視頻標簽7.2CSS過渡7.3CSS變換7.4CSS動畫目

錄7.2過渡什么是過渡？生活中處處可見的動畫過渡到底是什么？認識過渡7.2過渡過渡效果可以讓元素從一種狀態(tài)慢慢轉換到另一種狀態(tài)，例如漸顯、漸隱、動畫的加快減慢等。知識點講解transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性Transition屬性7.2過渡transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-durationtransition-timing-functiontransition-delay用于指定應用過渡效果的CSS屬性的名稱，其過渡效果通常在用戶將指針移動到元素上時發(fā)生。transition-property:none|all|property;基本語法格式：transition-transition-7.2過渡transition-propertytransition-timing-functiontransition-delay用于定義完成過渡效果需要花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms）transition-duration:時間;基本語法格式：transition-transition-duration7.2過渡transition-propertytransition-timing-functiontransition-durationtransition-delay規(guī)定過渡效果中速度的變化，例如，先慢速后快速、先快速后慢速等速度變化效果。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);基本語法格式：transition-7.2過渡transition-propertytransition-delaytransition-durationtransition-timing-function規(guī)定過渡效果何時開始，默認值為0，常用單位是秒（s）或者毫秒（ms）。transition-delay:time;基本語法格式：transition-transition-delay的屬性值可以為正整數(shù)、負整數(shù)和0。當設置為負數(shù)時，過渡動作會從該時間點開始，之前的動作被截斷；設置為正數(shù)時，過渡動作會延遲觸發(fā)。7.2過渡transition-propertytransition-durationtransition-timing-functiontransition-delay

transition屬性是一個復合屬性，用于在一個屬性中設置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。transition：propertydurationtiming-functiondelay;基本語法格式：transition-注意：在使用transition屬性設置多個過渡效果時，它的各個參數(shù)必須按照順序進行定義，不能顛倒。7.2過渡無論是單個屬性還是簡寫屬性，使用時都可以實現(xiàn)多個過渡效果。如果使用transition簡寫屬性設置多種過渡效果，需要為每個過渡屬性集中指定所有的值，并且使用逗號進行分隔。7.2過渡7.1音視頻標簽7.2CSS過渡7.3CSS變換7.4CSS動畫目

錄認識變形在網(wǎng)頁設計中，變形效果可以讓元素實現(xiàn)位置、形狀的變化，例如移動、傾斜、縮放以及翻轉等效果。想要實現(xiàn)變形效果，就需要為元素設置變形屬性，通過CSS3中transform屬性就可以實現(xiàn)變形效果。知識點講解2D變形3D變形7.3變形2D變形2D變形也稱為平面變形，是指在視覺平面內(nèi)的變化。即元素在X軸和Y軸的變化知識點講解平移縮放傾斜旋轉7.3變形平移縮放傾斜旋轉縮放傾斜旋轉平移是指元素位置的變化。在CSS3中，使用translate()可以實現(xiàn)平移效果transform:translate(x-value,y-value);基本語法格式：元素在水平方向上移動的距離元素在垂直方向上移動的距離注意：如果省略了第二個參數(shù)，則取默認值0。當值為負數(shù)時，表示反方向移動元素。7.3變形在使用translate()方法移動元素時，基點默認為元素中心點，然后根據(jù)指定的X坐標和Y坐標進行移動。7.3變形平移前平移后平移縮放傾斜旋轉在CSS3中，使用scale()可以實現(xiàn)元素縮放效果transform:scale(x-axis,y-axis);基本語法格式：注意：如果第二個參數(shù)省略，則第二個參數(shù)等于第一個參數(shù)值。x-axis和y-axis參數(shù)值可以是正數(shù)、負數(shù)和小數(shù)放大前的元素放大后的元素7.3變形平移縮放傾斜旋轉在CSS3中，使用skew()可以實現(xiàn)元素傾斜效果transform:skew(x-angle,y-angle);基本語法格式：注意：如果省略了第二個參數(shù)，則取默認值0。相對于X軸進行傾斜相對于Y軸進行傾斜傾斜前的元素傾斜后的元素7.3變形平移縮放傾斜旋轉在CSS3中，使用rotate()可以旋轉指定的元素對象transform:rotate(angle);基本語法格式：如果角度為正數(shù)值，則按照順時針進行旋轉，否則，按照逆時針旋轉表示要旋轉的角度值旋轉后的元素旋轉前的元素7.3變形更改變換的基點基點就是元素的中心點，或者是元素X軸和Y軸的50%位置處。知識點講解使用transform-origin屬性改變元素的中心點transform-origin:x-axisy-axisz-axis;基本語法格式：定義視圖被置于X軸的何處屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。默認值是50%。定義視圖被置于Y軸的何處屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。默認值是50%。定義視圖被置于Z軸的何處該值不能是一個百分比值，否則將會視為無效值，一般為像素單位。默認值是0px7.3變形3D變形3D變形是元素圍繞X軸、Y軸、Z軸的變化。知識點講解圍繞X軸旋轉圍繞Y軸旋轉3D旋轉7.3變形圍繞X軸旋轉圍繞Y軸旋轉3D旋轉圍繞Y軸旋轉3D旋轉rotateX()可以讓指定元素圍繞X軸旋轉transform:rotateX(a);基本語法格式：參數(shù)a用于定義旋轉的角度值，單位為deg，取值可以是正數(shù)也可以是負數(shù)。注意：如果值為正，元素將圍繞X軸順時針旋轉；如果值為負，元素圍繞X軸逆時針旋轉。7.3變形圍繞X軸旋轉圍繞Y軸旋轉3D旋轉rotateY()可以讓指定元素圍繞Y軸旋轉transform:rotateY(a);基本語法格式：如果值為正，元素圍繞Y軸順時針旋轉；如果值為負，元素圍繞Y軸逆時針旋轉。參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉的角度。7.3變形rotated3d()是rotateX()、rotateY()和rotateZ()演變的綜合屬性，用于設置多個軸的3D旋轉rotate3d(x,y,z,angle);基本語法格式：x、y、z可以取值0或1，當要沿著某一軸轉動，就將該軸的值設置為1，否則設置為0為要旋轉的角度圍繞X軸旋轉3D旋轉圍繞Y軸旋轉7.3變形rotateZ()函數(shù)和rotateX()函數(shù)、rotateY()函數(shù)功能一樣，區(qū)別在于rotateZ()函數(shù)用于指定一個元素圍繞Z軸旋轉。如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時針或逆時針旋轉，與rotate()效果等同，但rotateZ不是在2D平面上的旋轉。7.3變形perspective屬性perspective屬性主要用于呈現(xiàn)良好的3D透視效果,Perspective屬性的透視效應由屬性值來決定，屬性值越小，透視效果越突出。知識點講解none具有單位的數(shù)值7.3變形其他轉換屬性3D變形還包括移動和縮放，運用這些方法可以實現(xiàn)不同的轉換效果方法名稱描述translate3d(x,y,z)定義3D位移translateX(x)定義3D位移，僅使用用于X軸的值translateY(y)定義3D位移，僅使用用于Y軸的值translateZ(z)定義3D位移，僅使用用于Z軸的值scale3d(x,y,z)定義3D縮放scaleX(x)定義3D縮放，通過給定一個X軸的值scaleY(y)定義3D縮放，通過給定一個Y軸的值scaleZ(z)定義3D縮放，通過給定一個Z軸的值7.3變形其他轉換屬性屬性名稱描述屬性值transform-style規(guī)定被嵌套元素如何在3D空間中顯示flat：子元素將不保留其3D位置。preserve-3d子元素將保留其3D位置。backface-visibility定義元素在不面對屏幕時是否可見visible：背面是可見的。Hidden：背面是不可見的。在CSS3中還包含很多轉換的屬性，通過這些屬性可以設置不同的轉換效果7.3變形7.1音視頻標簽7.2CSS過渡7.3CSS變換7.4CSS動畫目

錄認識動畫由于在CSS3中，過渡效果只能定義元素過程動畫，并不能對過程中的某一環(huán)節(jié)進行控制。一些屬性可以實現(xiàn)更加豐富的動畫效果知識點講解animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation7.4動畫7.4動畫@keyframes規(guī)則animation屬性只有配合@keyframes規(guī)則才能實現(xiàn)動畫效果，因此在學習animation屬性之前，我們首先要學習@keyframes規(guī)則知識點講解@keyframesanimationname{ keyframes-selector{css-styles;}}基本語法格式：7.4動畫animationnamekeyframes-selectorcss-styleskeyframes-selectorcss-styles表示當前動畫的名稱。它將作為引用時的唯一標識，因此不能為空。7.4動畫css-styles關鍵幀選擇器。即指定當前關鍵幀要應用到整個動畫過程中的位置，值可以是一個百分比、from或者to。其中，from和0%效果相同表示動畫的開始，to和100%效果相同表示動畫的結束。animationnamekeyframes-selectorcss-styles7.4動畫定義執(zhí)行到當前關鍵幀時對應的動畫狀態(tài)。由CSS樣式屬性進行定義，多個屬性之間用分號分隔，不能為空。animationnamecss-styleskeyframes-selectorInternetExplorer9，以及更早的版本，不支持@keyframe

規(guī)則或animation屬性。InternetExplorer10、Firefox以及Opera支持@keyframes

規(guī)則和animation屬性。7.4動畫7.4動畫animation-name屬性animation-name屬性用于定義要應用的動畫名稱，為@keyframes動畫規(guī)定名稱。知識點講解animation-name:keyframename| ;基本語法格式：none適用于所有塊內(nèi)元素keyframename參數(shù)用于規(guī)定需要綁定到選擇器的keyframe的名稱，如果值為none，則表示不應用任何動畫。7.4動畫animation-duration屬性animation-duration屬性用于定義整個動畫效果完成所需要的時間，以秒或毫秒計。知識點講解animation-duration:time;基本語法格式：animation-duration屬性初始值為0。time參數(shù)是以秒（s）或者毫秒（ms）為單位的時間。當設置為0時，表示沒有任何動畫效果。當值為負數(shù)時，會被視為0。7.4動畫animation-timing-function屬性animation-timing-function用來規(guī)定動畫的速度曲線，可以定義使用哪種方式來執(zhí)行動畫速率。知識點講解animation-timing-function:value;基本語法格式：animation-timing-function的默認屬性值為ease7.4動畫animation-timing-function屬性屬性值描述linear動畫從頭到尾的速度是相同的。ease默認屬性值。動畫以低速開始，然后加快，在結束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結束。ease-in-out動畫以低速開始和結束。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值。animation-timing-function的常用屬性：7.4動畫animation-delay屬性animation-delay屬性用于定義執(zhí)行動畫效果延遲的時間，也就是規(guī)定動畫什么時候開始。知識點講解animation-delay:time;基本語法格式：參數(shù)time用于定義動畫開始前等待的時

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論