《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件10.0.1 HTML5與CSS3的更多特性_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件10.0.1 HTML5與CSS3的更多特性_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件10.0.1 HTML5與CSS3的更多特性_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件10.0.1 HTML5與CSS3的更多特性_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件10.0.1 HTML5與CSS3的更多特性_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

通過(guò)本章的學(xué)習(xí)，了解CSS原生動(dòng)畫的實(shí)現(xiàn)方式，能夠設(shè)計(jì)并編寫簡(jiǎn)單的CSS動(dòng)畫效果。掌握使用CSS3的特定屬性實(shí)現(xiàn)響應(yīng)式自適應(yīng)布局。理解HTML5新增API的調(diào)用方法，可以通過(guò)簡(jiǎn)單的JavaScript腳本實(shí)現(xiàn)HTMLCanvas畫布。了解下一階段學(xué)習(xí)路線，指導(dǎo)學(xué)員對(duì)WEB應(yīng)用開發(fā)未來(lái)的學(xué)習(xí)路線有一定認(rèn)識(shí)?！局R(shí)目標(biāo)】掌握CSS3實(shí)現(xiàn)原生動(dòng)畫的兩種方法。理解CSS3響應(yīng)式布局的一般方法理解HTML5新增API的調(diào)用手段。了解Web應(yīng)用開發(fā)學(xué)習(xí)路線。【技能目標(biāo)】能夠利用CSS3的特性實(shí)現(xiàn)簡(jiǎn)單的原生動(dòng)畫。能夠使用@media實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式自適應(yīng)布局。

教學(xué)目標(biāo)10.1.1關(guān)于HTML5HTML5.0制定于HTML4.0.1標(biāo)準(zhǔn)的基礎(chǔ)之上，延續(xù)了前一代版本的語(yǔ)言核心部分，通過(guò)對(duì)原有標(biāo)簽的修訂和新的元素引入，為HTML文檔強(qiáng)化了語(yǔ)義，目的在于增強(qiáng)人類和機(jī)器的可閱讀性。與此同時(shí)，HTML5.0通過(guò)添加一些新的媒體元素，彌補(bǔ)了以往HTML頁(yè)面只能使用瀏覽器插件播放音頻和視頻的缺陷，至此Flash走出了歷史舞臺(tái)。在原有的DOMAPI規(guī)范之外（API——ApplicationProgrammingInterface，應(yīng)用程序接口），HTML5繼續(xù)擴(kuò)充了更多的API，例如HTML5針對(duì)<canvas>元素的文本APIHistoryAPI全屏API鼠標(biāo)指針鎖定API地理位置API拖放和觸控事件10.1.2關(guān)于CSS3

通常根據(jù)瀏覽器的廠牌或內(nèi)核劃定私有屬性的前綴，例如上面的分列屬性column-count是目前草案規(guī)范的屬性名稱，而之前的部分就是私有屬性前綴，一般私有屬性有以下幾種：-Webkit-以Webkit引擎為內(nèi)核的瀏覽器，例如：Google的Chrome瀏覽器和Apple的Safari瀏覽器。-moz-以Mozilla基金會(huì)下的Gecko引擎為內(nèi)核的瀏覽器，例如：Firefox瀏覽器。-o-Opera瀏覽器的私有屬性。-ms-InternetExplorer瀏覽器（即IE瀏覽器）的私有屬性，當(dāng)某個(gè)特性稱為W3C正式推行的標(biāo)準(zhǔn)后，去掉這些私有屬性，可以減輕響應(yīng)代碼體量，例如上面的代碼，如果多列布局模塊正式發(fā)布，去掉私有屬性后代碼只有2行。下面我們一起看看CSS3中更精彩的內(nèi)容——?jiǎng)赢嫼兔襟w查詢。10.1.2.1CSS3動(dòng)畫CSS3兩種定義動(dòng)畫的方式有一些不同，animation屬性設(shè)定的動(dòng)畫與我們?nèi)粘Ｋ?jiàn)的動(dòng)畫原理相同，即逐幀動(dòng)畫，需要結(jié)合關(guān)鍵詞@keyframes來(lái)設(shè)定動(dòng)畫的關(guān)鍵幀，從而形成往復(fù)循環(huán)的動(dòng)畫；而transitions屬性設(shè)定的動(dòng)畫屬于讓元素從某種狀態(tài)逐漸“過(guò)渡”到另一種狀態(tài)的動(dòng)畫，通過(guò)設(shè)定播放時(shí)長(zhǎng)和過(guò)渡時(shí)間函數(shù)等屬性形成動(dòng)態(tài)效果，下面分別通過(guò)兩個(gè)案例展示各自的效果：案例1：流水漸變色按鈕本案例中按鈕的漸變色通過(guò)線性漸變函數(shù)linear-gradient為元素設(shè)定漸變背景圖實(shí)現(xiàn)，利用@keyframes配合背景圖片的位移產(chǎn)生動(dòng)態(tài)效果，關(guān)鍵幀中定義了5個(gè)幀的狀態(tài)，按鈕最終通過(guò)animation屬性實(shí)現(xiàn)線性的流水動(dòng)畫。<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<meta

name="viewport"

content="width=device-width,

initial-scale=1.0">

<title>Document</title>

<link

rel="stylesheet"

href="style.css"></head><body>

<div

class="container">

<a

href=""

class="btn">Button</a>

</div></body></html>body

{

margin:

0;}.container

{

padding:

2.5em;}.btn

{

text-align:

center;

font-family:

Impact,

Haettenschweiler,

'Arial

Narrow

Bold',

sans-serif;

display:

block;

width:

inherit;

margin:

.5em

auto;

padding:

1em

1.5em;

text-decoration:

none;

color:

white;

background:

linear-gradient(-45deg,

green,

blue,

indigo,

violet,

green);

background-size:

400%;

border-radius:

1em;}.btn:hover

{

animation:

waterfall

6s

linear

infinite;}@keyframes

waterfall

{

0%

{

background-position:

0%;

}

25%

{

background-position:

50%;

}

50%

{

backgroun

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論