




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
項目三任務(wù)二美化網(wǎng)頁其他區(qū)域目錄定位布局過渡變形動畫z-index屬性及透明度設(shè)置CSS網(wǎng)頁元素定位position屬性指定了元素的定位類型。position屬性的五個值:staticfixedrelativeabsolutestickystatic定位
HTML元素的默認值,即沒有定位,遵循正常的文檔流對象。靜態(tài)定位的元素不會受到top,bottom,left,right影響。<style>div.static{position:static;border:3pxsolid#73AD21;}</style></head><body><h2>position:static;</h2><divclass="static">該元素使用了position:static;</div></body>fixed定位
元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動:<style>p.pos_fixed{ position:fixed; top:35px; right:10px;}</style></head><body><pclass="pos_fixed">被固定的文本</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p><p>Sometext</p></body>注意:Fixed定位在IE7和IE8下需要描注意:Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持。Fixed定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。Fixed定位的元素和其他元素重疊。relative定位
相對定位元素的定位是相對其正常位置。<style>div.relative{position:relative;left:30px;border:3pxsolid#73AD21;}</style></head><body><h1>position:relative;</h1><p>設(shè)置position:relative;的元素相對于其正常位置進行定位:</p><divclass="relative">這個div元素設(shè)置position:relative;</div></body>absolute
position:absolute;的元素相對于最近的定位祖先元素進行定位(而不是相對于視口定位,如fixed)。<head><style>div.relative{position:relative;width:300px;height:200px;border:3pxsolid#73AD21;}div.absolute{position:absolute;top:80px;right:0;width:200px;height:100px;border:3pxsolid#73AD21;}</style></head>CSS過渡(transition)
指在給定的時間內(nèi)平滑地改變一個元素的屬性值,從一個樣式逐漸過渡到另一個樣式。
在實現(xiàn)css過渡時,必須規(guī)定兩項內(nèi)容:一、規(guī)定應(yīng)用過渡的css屬性名稱二、規(guī)定效果的時長過渡屬性(transition)是一個復合屬性,可以設(shè)置多種屬性。其中:element指需要過渡的元素
transition屬性實現(xiàn)簡單的動畫效果基本語法格式:element{transition:propertydurationtiming-functiondelay}掌握transition的子屬性,能夠設(shè)置過渡的名稱、時間、時間曲線等屬性屬性描述允許取值取值說明property規(guī)定應(yīng)用過渡的css屬性的名稱noneallproperty沒有屬性會獲得過渡默認值,所有屬性定義應(yīng)用過渡效果的css屬性名稱duration定義過渡效果花費的時間time值以秒或毫秒計,默認是0,意味著沒有效果delay規(guī)定效果開始前需要等待的時間time值以秒或毫秒計,默認是0屬性描述允許取值取值說明timing-function規(guī)定過渡效果的時間曲線lineareaseease-inease-outease-in-out規(guī)定以相同速度開始至結(jié)束。默認值,慢速開始,然后變快。規(guī)定以慢速開始的過渡效果。規(guī)定以慢速結(jié)束的過渡效果。規(guī)定以慢速開始和結(jié)束的過渡效果。css2D轉(zhuǎn)換transform屬性允許對元素應(yīng)用2D轉(zhuǎn)換,常見2D轉(zhuǎn)換:傾斜移動旋轉(zhuǎn)縮放基本語法格式transform:none|transform-functions用于設(shè)置變形函數(shù),可以是一個或多個變形函數(shù)列表。2D轉(zhuǎn)換的常用函數(shù)函數(shù)名描述參數(shù)rotate(angel)旋轉(zhuǎn)元素angel是度數(shù)值,代表旋轉(zhuǎn)角度skew(x-angel,angel)傾斜元素skewX(angel)沿著X軸傾斜元素angel是度數(shù)值,代表傾斜角度skewY(angel)沿著y軸傾斜元素angel是度數(shù)值,代表傾斜角度函數(shù)名描述參數(shù)scale(x,y)縮放元素,改變元素的高度和寬度scaleX(x)改變元素的寬度代表縮放比例,取值包括正數(shù),負數(shù)和小數(shù)scaleY(y)改變元素的高度函數(shù)名描述參數(shù)translate(x,y)移動元素對象,基于x和y坐標重新定位元素translateX(x)沿著X軸移動元素元素移動的數(shù)值,x代表左右方向,y代表上下方向,向左和向上使用負數(shù),反之用正數(shù)。translateY(y)沿著Y軸移動元素matrix(n,n,n,n,n,n,)2D轉(zhuǎn)換矩陣使用六個值的表示變形,所有變形的本質(zhì)都是由矩陣完成的在環(huán)保網(wǎng)中,為“登錄”按鈕添加縮放變形效果,css主要代碼如下:button:hover{transform:scale(1.05);}button:active{transform:scale(.95);}CSS動畫可以實現(xiàn)CSS樣式在多個狀態(tài)中進行轉(zhuǎn)換,主要組成部分是:CSS3動畫一組定義的動畫關(guān)鍵幀描述該動畫的CSS聲明@keyframes屬性可以設(shè)置多個關(guān)鍵幀,每個關(guān)鍵幀表示動畫過程中的一個狀態(tài),多個關(guān)鍵幀就可以使動畫十分豐富。經(jīng)歷多個狀態(tài)后變成最終狀態(tài)(動畫)基本語法格式@keyframesanimationname{keyframes-selector{css-styles}}@keyframes規(guī)則中的animationname是當前動畫的名稱;keyframes-selector是關(guān)鍵幀選擇器;css-styles當前關(guān)鍵幀的動畫狀態(tài)。@keyframes規(guī)則animation屬性animation屬性用于描述動畫的CSS聲明,它是一個復合屬性,包括指定具體動畫以及動畫時長等行為。基本語法格式animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-stateanimation屬性CSS3動畫animation子屬性屬性描述animation-name規(guī)定@keyframes動畫的名稱keyframename規(guī)定需要綁定到選擇器的keyframe的名稱none規(guī)定無動畫效果(可用于覆蓋來自級聯(lián)的動畫)animation-duration規(guī)定動畫完成一個周期所花費時間time值以秒或毫秒計算,默認是0屬性描述animation-timing-function規(guī)定動畫的速度曲線linear動畫從頭到尾的速度是相同的ease默認值。動畫以低速開始,然后加快,在結(jié)束前變慢ease-in動畫以低速開始ease-out動畫以低速結(jié)束ease-in-out動畫以低速開始和結(jié)束cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值??赡艿闹凳菑?到1的數(shù)值animation屬性CSS3動畫animation子屬性CSS3動畫animation子屬性animation屬性屬性描述animation-delay規(guī)定動畫開始前的延遲,可選time值以秒或毫秒計,默認是0animation-iteration-count規(guī)定動畫被播放的次數(shù)n定義動畫播放次數(shù)的數(shù)值,默認是1infinite規(guī)定動畫應(yīng)該無限次播放屬性描述animation-direction規(guī)定動畫是否在下一周期逆向播放normal默認值。動畫應(yīng)該正常播放alternate動畫應(yīng)該輪流反向播放animation-play-state規(guī)定動畫是否正在運行或暫停paused規(guī)定動畫已暫停running默認值,規(guī)定動畫正在播放animation-fill-mode規(guī)定對象動畫時間之外的狀態(tài)none不改變默認行為forwards當動畫完成后,保持最后一個屬性值(在最后一個關(guān)鍵幀中定義)backwards在animation-delay所指定的一段時間內(nèi),在動畫顯示之前,應(yīng)用開始屬性值(在第一個關(guān)鍵幀中定義)both向前和向后填充模式都被應(yīng)用animation屬性CSS3動畫animation子屬性animation屬性<body><div></div></body>在body中定義divSTEP01animation屬性<head><style>div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;}@keyframesexample{0%{background-color:red;}25%{background-color:yellow;}50%{background-color:blue;}100%{background-color:green;}}</style></head>在style中編寫css代碼STEP02定義動畫:example:顏色從紅到黃到藍色到綠色動畫過程如下:z-index屬性z-index屬性指定一個元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度教師教育培訓機構(gòu)戰(zhàn)略合作合同
- 2025福建省安全員《C證》考試題庫
- 2025年度企業(yè)產(chǎn)品質(zhì)量認證服務(wù)合同范本
- 2025年度歷史輔導班協(xié)議書退費及人文知識拓展合同
- 2025年度教育機構(gòu)員工入職教學與培訓合同
- 2025年度勞動解除協(xié)議書:物流行業(yè)員工退工補償與就業(yè)安置合同
- 智能家居融資居間合同范例
- 2025年度養(yǎng)豬業(yè)品牌營銷推廣合作協(xié)議
- 2025年度體育賽事賽事獎勵及獎金分配轉(zhuǎn)委托合同
- 2025年度5G通信技術(shù)合作介紹費合同
- 2024屆高考政治一輪復習經(jīng)濟學名詞解釋
- 幼兒園大班音樂教案《我們多快樂》
- GB/T 22919.9-2024水產(chǎn)配合飼料第9部分:大口黑鱸配合飼料
- 《草船借箭》課本劇劇本-4篇
- 體育與兒童心理健康教育教材教學課件
- 婚姻家庭法(第三版)教案全套 項目1-9 婚姻家庭法概述-特殊婚姻家庭關(guān)系
- 可持續(xù)采購與供應(yīng)鏈管理
- 心肺復蘇及AED教學
- 電梯維保經(jīng)營計劃書
- 工程部部門助理崗位職責
- 急需學科專業(yè)引導發(fā)展清單
評論
0/150
提交評論