CSS動態(tài)效果css動態(tài)效果_第1頁
CSS動態(tài)效果css動態(tài)效果_第2頁
CSS動態(tài)效果css動態(tài)效果_第3頁
CSS動態(tài)效果css動態(tài)效果_第4頁
CSS動態(tài)效果css動態(tài)效果_第5頁
已閱讀5頁，還剩51頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第8章CSS動態(tài)效果CSS3.0動態(tài)效果由變形（Transform）、過渡（Transition）、動畫（Animation）三種動態(tài)效果屬性去實現(xiàn)。這三種動態(tài)效果作用在元素上，與其它各種樣式屬性結合在一起，可以直接在Web層面進行動效設計與制作，無需借助第三方工具和腳本程序。了解CSS3.0網(wǎng)頁動態(tài)效果的類型理解CSS3.0變形效果、過渡效果和動畫效果的基本概念掌握變形、過渡、動畫相關屬性的基本語法能運用元素變形、過渡、動畫相關技巧制作頁面內容安排CSS3.0變形8.1CSS3.0過渡8.2CSS3.0動畫8.3小試牛刀8.48.1CSS3.0變形CSS3.0變形通過transform屬性來實現(xiàn)。該屬性作用在塊狀元素上，可以使塊狀元素產(chǎn)生平移、旋轉、縮放和扭曲的效果。CSS3.0變形8.18.1.1CSS3.0變形屬性格式：transform:rotate(<angle>)|translate(x,y)|translateX(x)|translateY(y)|scale(x,y)|scaleX(x)|scaleY(y)|skew(x,y)| skewX(x)|skewY(y)取值：rotate（<angle>）:旋轉translate（x，y）:移動translateX(x):水平移動translateY(y):垂直移動scale(x,y):縮放scaleX(x):水平縮放scaleY(y):垂直縮放skew(x,y):扭曲skewX(x):水平扭曲skewY(y):垂直扭曲CSS3.0變形8.11.旋轉rotate(<angle>)transform屬性的屬性值為rotate時表示對元素進行旋轉。其中angle是指旋轉角度，正數(shù)表示順時針旋轉，負數(shù)表示逆時針旋轉。例如，對div元素實施以下CSS樣式，該div將順時針旋轉30度，效果如圖8-1所示，樣式代碼如下：div{transform:rotate(30deg);}30°CSS3.0變形8.130°2.平移translatetransform屬性的屬性值為translate時表示對元素進行平移。（1）translate(x,y)為水平方向和垂直方向同時移動。x為水平方向偏移值，正數(shù)表示向右平移，負數(shù)表示向左平移；y為垂直方向偏移值，正數(shù)表示向下平移，負數(shù)表示向上平移。例如，對div元素實施以下CSS樣式，該div將向右移動100px，向下移動50px100px50pxCSS3.0變形8.1transform屬性的屬性值為translate時表示對元素進行平移。（1）translate(x,y)為水平方向和垂直方向同時移動。x為水平方向偏移值，正數(shù)表示向右平移，負數(shù)表示向左平移；y為垂直方向偏移值，正數(shù)表示向下平移，負數(shù)表示向上平移。例如，對div元素實施以下CSS樣式，該div將向右移動100px，向下移動50px，如圖8-2所示，樣式代碼如下：div{transform:translate(100px,50px);}100px50px（2）translateX(x)僅水平方向移動（X軸移動），例如，對div元素實施以下CSS樣式，該div將向左移動100px，效果如圖8-3所示，樣式代碼如下：div{transform:translateX(-100px);}（3）translateY(Y)僅垂直方向移動（Y軸移動），如對div元素實施以下CSS樣式，該div將向上移動20px，效果如圖8-4所示，樣式代碼如下：div{transform:translateY(-20px);}100px20pxCSS3.0變形8.13.縮放scaletransform屬性的屬性值為scale時表示對元素進行縮放。（1）scale(x,y)使元素水平方向和垂直方向同時縮放，基中x表示水平方向縮放的倍數(shù)；y表示垂直方向的縮放倍數(shù)。y是一個可選參數(shù)，如果沒有設置y值，則表示x，y兩個方向的縮放倍數(shù)是一樣的?？s放中心點就是元素的中心位置，縮放基數(shù)為1，如果其值大于1，元素就放大，反之其值小于1，元素縮小。例如，對div元素實施以下CSS樣式，該div在水平方向放大3倍，垂直方向放大2倍，效果如圖8-5所示，樣式代碼如下：div{transform:scale(3,2);}div原大?。?）scaleX(x)使元素僅水平方向縮放。例如，對div元素實施以下CSS樣式，該div僅在水平方向放大2倍，效果如圖8-7所示，樣式代碼如下：div{transform:scaleX(2);}（3）scaleY(y)使元素僅垂直方向縮放。例如，對div元素實施以下CSS樣式，該div僅在水平方向放大3倍，效果如圖8-8所示，樣式代碼如下：div{transform:scaleY(3);}div原大小div原大小CSS3.0變形8.14.扭曲skewtransform屬性的屬性值為skew時表示對元素進行扭曲。（1）skew(x,y)使元素在水平和垂直方向同時扭曲，x是水平方向扭曲角度，y是垂直方向扭曲角度。其中第二個參數(shù)y是可選參數(shù)，如果沒有設置第二個參數(shù)，那么y軸為0deg。扭曲是以元素中心為基點。例如，對div元素實施以下CSS樣式，該div在x方向扭曲30度，在y方向扭曲20度，效果如圖8-9所示，樣式代碼如下：div{transform:skew(30deg,20deg);}30°20°（2）skewX(x)僅使元素在水平方向扭曲變形，例如，對div元素實施以下CSS樣式，該div在x方向扭曲30度，效果如圖8-10所示，樣式代碼如下：div{transform:skewX(30deg);}如要使該div在x方向扭曲-30度，效果如圖8-11所示，樣式代碼如下：div{transform:skewX(-30deg);}30°-30°（3）skewY(y)僅使元素在垂直方向扭曲變形，例如，對div元素實施以下CSS樣式，該div在y方向扭曲30度，效果如圖8-12所示，樣式代碼如下：div{transform:skewY（30deg）;}30°CSS3.0變形8.18.1.2變形基準點transform-origin屬性格式：transform-origin：（x，y）;取值：（x，y）為元素基點位置功能：用來設置元素變形的基點（參照點）。在沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己的中心位置進行變化的。但有時候需要在不同的位置對元素進行這些操作，那么就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置。x值是定義基準點在水平方向的位置，其值可以是關鍵字“l(fā)eft”、“center”、“right”也可以是百分值,也可以是直接以em、px等為單位的數(shù)字位置值。“l(fā)eft”對應的百分值為0%；“center”對應的百分值為50%；“right”對應的百分值為100%。y值是定義基準點在水平方向的位置，其值可以是關鍵字“top”、“center”、“bottom”也可以是百分值,也可以是直接以em、px等為單位的數(shù)字位置值?！皌op”對應的百分值為0%；“center”對應的百分值為50%；“bottom”對應的百分值為100%。例如，對div元素實施以下CSS樣式，該div將以左上角為基準順時針旋轉60度，效果如圖8-14所示，參考代碼如下：div{ background-color:#396; height:100px; width:200px; transform:rotate(60deg); transform-origin:lefttop;}transform-origin:lefttop;設置了旋轉基準點為左上角，等價于transform-origin:00;或transform-origin:0%0%8.1.3CSS3.0變形效果案例8.1案例8-1：本案例通過導航的制作展示transform屬性變形效果。導航初始狀態(tài)如圖8-15所示。導航在鼠標懸停時，超鏈接將會產(chǎn)生位移、平移、垂直移動、順時針旋轉45度、縮小、水平縮放、垂直縮放、扭曲、水平扭曲、垂直扭曲等變形效果，如圖8-16所示。參考代碼如下：<body><divclass="menu"><ul><liclass="translate"><ahref="#">Translate</a></li><liclass="translate-x"><ahref="#">TranslateX</a></li><liclass="translate-y"><ahref="#">TranslateY</a></li><liclass="rotate"><ahref="#">Rotate</a></li><liclass="scale"><ahref="#">Scale</a></li><liclass="scale-x"><ahref="#">ScaleX</a></li><liclass="scale-y"><ahref="#">ScaleY</a></li><liclass="skew"><ahref="#">Skew</a></li><liclass="skew-x"><ahref="#">SkewX</a></li><liclass="skew-y"><ahref="#">SkewY</a></li></ul></div></body><styletype="text/css">ul{border-top:15pxsolidblack;padding:010px;list-style-type:none;}a{display:block;color:#fff;float:left;margin:05px;font-size:14px;height:50px;line-height:50px;text-align:center;width:65px;padding:10px5px;background:#151515;border-radius:005px5px;box-shadow:001px#ccc,inset002px#fff;text-shadow:01px1px#686868;text-decoration:none;}.translatea{background:#2EC7D2;}.translate-xa{background:#8FDD21;}.translate-ya{background:#F45917;}.rotatea{background:#D50E19;}.scalea{background:#cdddf2;}.scale-xa{background:#0fDD2;}.scale-ya{background:#cd5917;}.skewa{background:#519000;}.skew-xa{background:#D50000;}.skew-ya{background:#E19000;}.translatea:hover{transform:translate(-10px,-10px);}/*鼠標經(jīng)過時發(fā)生位移*/.translate-xa:hover{transform:translateX(-10px);}/*鼠標經(jīng)過時發(fā)生平移*/.translate-ya:hover{transform:translateY(-10px);}/*鼠標經(jīng)過時發(fā)生垂直移動*/.rotatea:hover{transform:rotate(45deg);}/*鼠標經(jīng)過時旋轉45度*/.scalea:hover{transform:scale(0.8,1.8);}/*鼠標經(jīng)過時縮小*/.scale-xa:hover{transform:scaleX(0.8);}/*鼠標經(jīng)過時水平縮放*/.scale-ya:hover{transform:scaleY(1.2);}/*鼠標經(jīng)過時垂直縮放*/.skewa:hover{transform:skew(45deg,15deg);}/*鼠標經(jīng)過時扭曲*/.skew-xa:hover{transform:skewX(-30deg);}/*鼠標經(jīng)過時水平扭曲*/.skew-ya:hover{transform:skewY(30deg);}/*鼠標經(jīng)過時垂直扭曲*/</style>8.1.4任務8-1：基于CSS3.0變形制作頁面8.11.任務描述用CSS3.0變形效果制作“神游網(wǎng)”首頁。頁面采用固定寬度居中版式，整體效果如圖8-17所示。主體部分左邊照片逆時針旋轉；中間部分插入照片，鼠標懸停時照片放大；主體部分右側是導航，鼠標經(jīng)過時導航鏈接向左平移。2.任務要求要完成整個頁面的制作，特別是主體部分照片和導航變形效果的處理，注意其細節(jié)。通過本任務的練習，要掌握變形相關的制作技巧以及transform屬性的基本設置。3.任務分析本任務用首先制作固定寬度且居中的頁面。主體部分左邊div用照片作背景，通過設置transform:rotate(-3deg)旋轉變形屬性，使之逆時針旋轉-3度；主體中間部分插入照片，通過設置鼠標經(jīng)過時transform:scale(1.05,1.05)縮放變形屬性，使照片放大1.05倍；主體部分右側是導航，通過設置鼠標經(jīng)過時transform:translateX(-10px)平移變形屬性，導航超鏈接產(chǎn)生平移效果，使頁面呈現(xiàn)動態(tài)效果。8.1.4任務8-1：基于CSS3.0變形制作頁面8.14.工作過程步驟1站點規(guī)劃（1）新建文件夾作為站點，站點內建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設置<title>為“任務8-1”；將網(wǎng)頁命名為task8-1.html保存在站點所在的目錄。步驟2建立網(wǎng)頁的基本結構網(wǎng)頁task8-1.html最外層為div#container，里層div#pic用于展示左側封面照片，div#banner層插入橫幅圖片，項目列表用于制作導航。網(wǎng)頁基本代碼如下：<body><divid="container"><divid="pic"></div><divid="banner"><imgsrc="ba1.jpg"width="400"height="267"/></div><ul><li><ahref="#">方寸神游</a></li><li><ahref="#">詩行天下</a></li><li><ahref="#">沿途有文</a></li><li><ahref="#">行攝天涯</a></li><li><ahref="#">景點攻略</a></li><li><ahref="#">戶外休閑</a></li></ul></div></body>8.1.4任務8-1：基于CSS3.0變形制作頁面8.1步驟3設置頁面整體樣式設置body的背景顏色，并將margin設置為0，不產(chǎn)生縫隙步驟4用固定寬度且居中進行頁面排版最外層div#container采用相對定位，寬度800px;左邊置于50%的位置，即頁面水平中間線右側，然后再往左退回一半的位置(margin-left:-400px;),完成#container居中。效果如圖8-18所示8.1.4任務8-1：基于CSS3.0變形制作頁面8.1步驟5設置左邊照片的樣式左側div用絕對定位調整位置。用照片作為背景圖，設置div的大小，并使用旋轉變形，將div#pic逆時針旋轉-3度。#pic{ background-image:url(images/ba3.jpg); background-repeat:no-repeat; height:486px; width:234px; position:absolute; left:16px; top:7px; transform:rotate(-3deg);}8.1.4任務8-1：基于CSS3.0變形制作頁面8.1步驟6設置中間照片div#banner的樣式（1）用相對定位調整div#banner的位置，并給中間圖像加邊框；（2）給div#banner加上鼠標懸停時圖片放大的變形特效。參考代碼如下：#banner:hover{transform:scale(1.05,1.05);}#banner{ height:267px;width:400px; position:relative;left:150px;top:120px; border:#C55E212pxsolid;}8.1.4任務8-1：基于CSS3.0變形制作頁面8.1a{ font-size:12px; display:block; text-align:center; padding-top:10px; width:80px; height:22px; text-decoration:none;}a:link,a:visited{ color:#F60; background:url(button1.jpg)no-repeat;}a:hover{ color:#fff; background:url(button2.jpg)no-repeat;a:hover{ transform:translateX(-10px);}步驟7設置右側導航的樣式（1）設置項目列表樣式，將導航項目列表ul下的超鏈接呈塊狀顯示。將ul從原來的位置調整到banner圖片的右邊，注意要定義寬度，否則會加寬整個頁面，使頁面產(chǎn)生橫向滾動條；（2）設置右側導航超鏈接樣式。超鏈接用圖片做背景，鼠標經(jīng)過時，改變背景圖及字的顏色。（3）設置導航在鼠標經(jīng)過之后，超鏈接產(chǎn)生平移效果，效果如圖8-19所示。參考代碼如下：步驟8保存文件，完成神游網(wǎng)頁面的制作。8.2CSS3.0過渡過渡是指元素可以從一種狀態(tài)平滑地變化到另一種狀態(tài)，體現(xiàn)在CSS上就是允許某些屬性值在一定的時間區(qū)間內平滑地過渡到另一個取值。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發(fā)。CSS3.0通過transition屬性設置屬性的過渡變換，它能圓滑地以動態(tài)效果的形式展示屬性值從一種狀態(tài)變化到另一種狀態(tài)的過程與軌跡。CSS3.0過渡8.28.2.1CSS3.0過渡相關屬性CSS3.0過渡相關屬性包括過渡時間（transition-duration）、屬性類型（transition-property）、過渡延時（transition-delay）以及速率變化（transition-timing-function）共4種屬性，其中，過渡時間屬性（transition-duration）是過渡效果必須設置的屬性。過渡屬性作用在需要過渡的元素上，過渡效果涉及該元素的初始狀態(tài)和結果狀態(tài)，過渡屬性應作用于該元素的初始狀態(tài)樣式。1.過渡時間transition-duration屬性格式：transition-duration:<time>取值：以秒（s）或毫秒（ms）計，默認值是0s。如果針對多個屬性各自有多個過渡時間，則用逗號分隔。功能：該屬性規(guī)定完成過渡效果需要花費的時間。此屬性是過渡效果的必須要設置的屬性。例如，對div元素實施以下CSS樣式，則鼠標經(jīng)過該div時，div將在3秒內右移過渡500px，如圖8-20所示。div{transition-duration:3s;}div:hover{transform:translateX(500px);}CSS3.0過渡8.22.屬性類型transition-property屬性格式：transition-property:<屬性類型>取值：需要實施過渡的屬性類型，屬性類型之間用逗號分隔。如：width,height功能：該屬性規(guī)定應用過渡效果的CSS屬性的名稱。當有多個屬性進行過渡，并且過渡時間不一致時，需要分別定義各個過渡屬性及其時間。當取值為all時表示針對所有屬性類型實行過渡。例如，對div元素實施以下CSS樣式，則鼠標經(jīng)過該div時，div將在3秒內右移過渡500px，并且4秒內寬度從100px過渡到200px，如圖8-21所示，代碼如下：div{width:100px;transition-duration:3s,4s;transition-property:transform,width;}div:hover{transform:translateX(500px);width:200px;}3.過渡延時transition-delay屬性格式：transition-delay:<time>取值：延時時間以秒（s）或毫秒（ms）作時間單位，默認值為0s，即沒有延時。功能：該屬性規(guī)定在過渡效果開始之前需要等待的時間，以秒或毫秒計。例如，對div元素實施以下CSS樣式，則鼠標經(jīng)過該div延時2秒后，div才用3秒時間右移過渡500px。div{transition-duration:3s;transition-delay:2s;}div:hover{transform:translateX(500px);}CSS3.0過渡8.24.速率變化transition-timing-function屬性格式：transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out取值：ease：（逐漸變慢）默認值；linear：（勻速）；ease-in：(加速)；ease-out：（減速）；ease-in-out：（加速然后減速）；功能：該屬性規(guī)定過渡效果的速度曲線，使用三次貝塞爾（CubicBezier）函數(shù)來生成速度曲線。屬性值linear過渡從頭到尾的速度是相同的；ease過渡是默認值，該過渡值以低速開始，然后加快，在結束前變慢；ease-in過渡以低速開始，然后加速；ease-out過渡以高速開始，低速結束；ease-in-out過渡以低速開始和結束，中間進行一次加速。CSS3.0過渡8.25.transition屬性格式：transition:<transition-duration><transition-property><transition-delay><transition-timing-function>取值：transition-property：屬性類型值，即執(zhí)行過渡的屬性transition-duration：過渡時間值，即過渡持續(xù)的時間transition-timing-function：速率變化值，即過渡持續(xù)時間段中的速率變化transition-delay：過渡延時值，即過渡延遲的時間功能：transition屬性是一個簡寫屬性，將過渡相關的4個屬性集成在一個transition屬性中，以參數(shù)形式進行統(tǒng)一設置，4個參數(shù)中間用空格隔開。如對div元素實施以下CSS樣式，表示對div所有狀態(tài)改變的屬性在延時0.5秒后實施3秒的加速過渡。8.2.2CSS3.0過渡效果案例8.2案例8-2：本案例通過9個div展示transition屬性過渡效果。div初始狀態(tài)如圖8-22所示，鼠標懸停div元素后，div的寬度擴大。如圖8-23所示是鼠標懸?！癊ase-in加速”時最后的狀態(tài)。各div采用不同的過渡方式，包括:鼠標經(jīng)過時沒有過渡直接改變位置；鼠標懸停3秒鐘后寬度逐漸過渡到500px；延時2秒后寬度在3秒內逐漸過渡到500px；分別在2秒和6秒同時改變寬度和背景顏色；采用transition簡寫并速率為Ease逐漸變慢；Ease-in加速；Ease-out減速；Ease-in-out先加速后減速；Linear勻速。<body><divid="timings-demo"><divid="box1"class="demo-box">鼠標懸停時沒有過渡直接改變寬度</div><divid="duration"class="demo-box">鼠標懸停3秒鐘寬度逐漸過渡到500px</div><divid="delay"class="demo-box">延時2秒后寬度在3秒逐漸過渡到500px</div><divid="prop"class="demo-box">分別在2秒和6秒同時改變寬度和背景顏色</div><divid="ease"class="demo-box">transition簡寫并速率為Ease逐漸變慢</div><divid="ease-in"class="demo-box">Ease-in加速</div><divid="ease-out"class="demo-box">Ease-out減速</div><divid="ease-in-out"class="demo-box">Ease-in-out先加速后減速</div><divid="linear"class="demo-box">Linear勻速</div></div></body><styletype="text/css"> #timings-demo{ border:1pxsolid#ccc;padding:10px;height:550px;width:500px; } .demo-box{ width:300px;height:50px;text-align:center;line-height:50px; text-align:center;color:#fff;background:#96c;border-radius:5px; box-shadow:inset005pxrgba(102,153,0,0.5);margin-bottom:10px; } #box1{/*鼠標懸停時沒有過渡直接改變寬度*/ background:#F3F; } #box1:hover{ width:500px; } #duration{/*鼠標懸停3秒鐘寬度逐漸過渡到500px*/background:#FC0;transition-duration:3s;} #duration:hover{width:500px; } #delay{/*延時2秒后寬度在3秒逐漸過渡到500px*/ background:#03F; transition-duration:3s; transition-delay:2s; } #delay:hover{ width:500px; } #prop{/*分別在2秒和6秒同時改變寬度和背景顏色*/ background:#6d6; transition-property:width,background; transition-duration:2s,6s; } #prop:hover{ width:500px;background:red; } /*采用transition簡寫方式，分別設置不同的速率*/ #ease{transition:all5sease0.3s;background:#f36;} #ease-in{transition:all3sease-in0.5s;background:#369;} #ease-out{transition:all5sease-out0s;background:#636;} #ease-in-out{transition:all1sease-in-out2s;background:#936;} #linear{transition:all6slinear0s;background:#999;} #ease:hover,#ease-in:hover,#ease-out:hover,#ease-in-out:hover,#linear:hover{

width:500px; }</style>8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.21.任務描述用CSS3.0過渡效果制作“行攝天涯”頁面。主體部分為八張照片組成的照片墻。鼠標在張片上懸停，分別產(chǎn)生向下拉簾效果、文字落幕效果、文字升幕效果、幻燈片切換效果、圖片透明效果、圖片移除效果、圖片全景效果、圖片旋轉效果。整體效果如圖8-24所示。2.任務要求完成整個頁面八個動態(tài)效果的制作。通過本任務的練習，要掌握過渡相關的制作技巧以及transition屬性的基本設置；要對比多種實現(xiàn)手段，做到舉一反三。8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.23.任務分析本任務首先制作固定寬度且居中的頁面，然后采用flex彈性布局，垂直方向分三行制作照片墻，八張照片作為項目，分別用.p11、.p12、.p21、.p22、.p23、.p31、.p32、.p33八個類修飾。主體部分左上角（div.p11）照片在鼠標經(jīng)過時呈現(xiàn)自上而下的拉簾效果，簾幕是通過增加空的CSS偽元素去實現(xiàn)的。該偽元素設置成顏色半透明，初始高度為0，鼠標經(jīng)過div.p11時，偽元素的高度過渡到100%，從而達到自上而下的拉簾效果。注意，過渡的主體是偽元素，所以過渡屬性要在偽元素的初始狀態(tài)設置。div.p12是文字落幕效果、div.p21是文字升幕效果、div.p22是幻燈片切換效果、div.p31是圖片移除效果，這些效果的制作關鍵是內部增加了兩個塊box1和box2，通過這兩個塊的位置平移過渡，實現(xiàn)以上4種動態(tài)效果。div.p23是圖片透明效果，通過不透明度屬性過渡來實現(xiàn)；div.p32是圖片全景效果，通過margin-left屬性的過渡來實現(xiàn)橫向掃描；div.p32是圖片旋轉360度效果，通過旋轉屬性的過渡來實現(xiàn)。如果沒有過渡，將圖片旋轉360度將不會有任何外觀上的變化。8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.24.工作過程步驟1站點規(guī)劃（1）新建文件夾作為站點，站點內建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設置<title>為“任務8-2”；將網(wǎng)頁命名為task8-2.html，保存在站點所在的目錄。步驟2建立網(wǎng)頁的基本結構其中類p11、p12、p21、p22、p23、p31、p32、p33所在的div用來作為8個照片的展示塊，分成3行。<body><divid="container"> <divclass="line"> <divclass="p11"></div> <divclass="p12"></div> </div> <divclass="line"> <divclass="p21"></div> <divclass="p22"></div> <divclass="p23"></div> </div> <divclass="line"> <divclass="p31"></div> <divclass="p32"></div> <divclass="p33"></div> </div></div></body>8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟3頁面整體布局參照6.2.4的內容，制作固定寬度為800px并且居中顯示的整體布局，設置body和最外層div#container的樣式步驟4頁面主體排版div#container采用flex彈性布局，分為三行,用3組<divclass="line"></div>作為#container容器的項目，設置每一行平均分配#container總高度；同時又作為容器分別包含2個或3個照片項目。#container{display:flex;flex-direction:column;}/*最外層#container作為容器，項目垂直分布*/.line{width:760px;margin:10px20px;background-color:#FFF; flex:1;/*作為#container容器的每一個項目，平均分配總高度*/ display:flex; /*同時又作為內部照片塊項目的容器*/}.linediv{ flex:1;/*.line容器的項目，平均分配總寬度*/ margin:8px5px05px;overflow:hidden;height:130px;}8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟5頁面主體第1行第1張照片實現(xiàn)拉簾效果（1）頁面主體第1行第1個塊寫入內容“行攝天涯”；（2）設置div.p11的樣式，效果如圖8-25所示；（3）在div.p11內增加內容為空的CSS偽元素用作簾幕。設置該偽元素背景顏色半透明，初始高度為0，鼠標經(jīng)過div.p11時，偽元素高度在3秒內過渡到100%，實現(xiàn)拉簾效果，效果如圖8-26所示。為了保證讓div.p11被鼠標觸碰到，并且讓div.p11的文字內容“行攝天涯”顯示出來，需要設置div.p11的堆放順序位于偽元素的上面。div.p11::after{ content:""; /*偽元素內容為空*/ height:0px; /*偽元素初始高度為0*/ position:absolute; left:0; top:0; width:100%; background:hsla(198,51.52%,93.53%,.5);/*設置偽元素顏色半透明*/ transition-duration:3s;/*設置過渡時間*/ z-index:-1;/*讓文字顯示出來*/}div.p11:hover::after{ height:100%;/*鼠標經(jīng)過div.p11，偽元素高度變?yōu)?00%*/ }8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟6頁面主體第1行第2張照片實現(xiàn)文字落幕效果（1）頁面主體第1行第2個塊內增加兩個塊div.box1和div.box2，這.box1和.box2兩個類是作為第2張照片到第7張照片內部塊的通過樣式。p12下的第二個塊的私有樣式要通過p12box2類定義；（2）設置.box1和.box2兩個類的樣式，其中div.box1的大小與div.p12大小相同，占滿整個父div的空間；div.box2在div.box1的下面，并設置成顏色半透明，用作簾幕。由于div.linediv進行了overflow:hidden溢出處理，故div.box2不會被顯示出來；（3）設置div.p12的樣式，效果如圖8-27所示；（4）設置div.p12下的第二個塊的私有樣式。將原本處于第1個塊下面的第2個塊向上移動，初始狀態(tài)覆蓋在第1個塊上面。鼠標經(jīng)過時，第2個塊在1秒內向下過渡到原來的位置（此處通過margin-top屬性調整位置），實現(xiàn)文字落幕效果，如圖8-28所示8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟7頁面主體第2行第1張照片實現(xiàn)文字升幕效果（1）頁面主體第2行第1個塊內增加div.box1和div.box2兩個塊（2）設置div.p21的樣式，效果如圖8-29所示（3）設置第2個塊的私有樣式。鼠標經(jīng)過p21時，原本處于第1個塊下面的第2個塊在1秒內向上過渡，覆蓋在第1個塊上面，實現(xiàn)文字升幕效果，效果如圖8-30所示8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟8頁面主體第2行第2張照片實現(xiàn)幻燈片切換效果（1）頁面主體第2行第2個塊內增加兩個div；（2）設置div.p22的樣式，效果如圖8-31所示；（3）設置第2個塊的私有樣式。第2個塊用照片做背景，將原本處于第1個塊下面的第2個塊移動到第1個塊的右邊。由于父塊做了溢出處理，第2個塊初始狀態(tài)被隱藏。鼠標經(jīng)過p22時，第2個塊在1秒內向左過渡平移，覆蓋在第1個塊上面，實現(xiàn)幻燈片切換效果，效果如圖8-328.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟9頁面主體第2行第3張照片實現(xiàn)圖片透明效果（1）頁面主體第2行第3個塊內增加兩個div；（2）設置div.p23的樣式；（3）設置第2個塊的私有樣式.p23box2。將原本處于第1個塊下面的第2個塊（簾幕）向上移動，覆蓋在第1個塊上面，實現(xiàn)圖片半透明顯示，效果如圖8-33所示。鼠標經(jīng)過時，第2個塊（簾幕）在1秒內不透明度屬性過渡到0，使簾幕消失，照片變?yōu)榍逦?，效果如圖8-34所示，8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟10頁面主體第3行第1張照片實現(xiàn)圖片移除效果（1）頁面主體第3行第1個塊內增加兩個div；（2）設置div.p31的樣式，效果如圖8-35所示；（3）設置第2個塊的私有樣式。第2個塊用照片作背景圖，通過相對定位覆蓋在第1個塊上面。鼠標經(jīng)過p31時，第2個塊在1秒內向右邊過渡平移，原本處于第1個塊的照片得以出現(xiàn)，實現(xiàn)圖片移除效果，效果如圖8-36所示8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟11頁面主體第3行第2張照片實現(xiàn)圖片全景效果（1）頁面主體第3行第2個塊內增加1個div；（2）設置.p32box2的樣式。該塊用一副寬度大于顯示窗口的照片作背景圖，效果如圖8-37所示。鼠標經(jīng)過p32時，該塊向左過渡平移，將原本被父塊遮擋的部分得以從左到右掃描呈現(xiàn)，實現(xiàn)圖片全景效果，效果如圖8-38所示；8.2.3任務8-2：基于CSS3.0過渡制作照片墻動態(tài)效果頁面8.2步驟12

頁面主體第2行第3張照片實現(xiàn)圖片旋轉效果設置div.p33的樣式，用照片作背景圖，效果如圖8-39所示。鼠標經(jīng)過時，照片順時針旋轉360度，設置過渡時間為1秒，可以看到旋轉的軌跡過程，效果如圖8-40所示

12步驟13

保存文件，完成“行攝天涯”照片墻頁面的制作。8.3CSS3.0動畫CSS3.0動畫是通過"keyframes"（即“關鍵幀”）控制元素從初始狀態(tài)到結束狀態(tài)每一時間段的屬性來實現(xiàn)的。這與上一節(jié)transition只定義初始屬性和最終屬性不同，因而可以做到更好、更多的動畫細節(jié)。CSS3.0動畫無需通過動作觸發(fā)就能自動播放。它采用@keyframes規(guī)則結合animation屬性來實現(xiàn)對關鍵點的屬性控制。@keyframes中的樣式規(guī)則是由多個時間百分比構成的時間節(jié)點?？梢栽谶@個規(guī)則中創(chuàng)建多個百分比時間段，分別在每一個時間段給需要有動畫效果的元素加上不同的屬性，從而讓元素達到不斷變化的效果，比如說移動、改變元素顏色、大小、形狀等。CSS3.0動畫8.3

8.3.1CSS3.0動畫相關屬性1.@keyframes規(guī)則格式：@keyframesanimationname{keyframes-selector{css-styles;}}取值：animationname：animation-name屬性所定義的動畫名稱；keyframes-selector：動畫持續(xù)時間的百分比，可以用關鍵字"from"和"to"，等價于0%和100%功能：@keyframes規(guī)則作用于animation-name屬性所定義的動畫，以百分比來規(guī)定屬性改變發(fā)生的時間，也就是時間線上的關鍵幀。0%是動畫開始的時間，100%是動畫結束的時間。為了獲得最佳的瀏覽器支持，必須始終定義0%和100%這兩個時間段選擇器。2.animation-name屬性格式：animation-name：<name>取值：自定義動畫名稱功能：該屬性為@keyframes動畫規(guī)定一個名稱，是@keyframes動畫必須定義的屬性。3.animation-duration屬性格式：animation-duration：<time>取值：以秒（s）或毫秒（ms）計，默認值是0，意味著沒有動畫效果功能：該屬性規(guī)定完成動畫效果需要花費的時間，是@keyframes動畫必須定義的屬性。CSS3.0動畫8.3

4.animation-iteration-count屬性格式：animation-iteration-count：n|infinite取值：n：定義動畫播放次數(shù)的數(shù)值infinite：規(guī)定動畫無限次播放功能：該屬性定義動畫的播放次數(shù)，是@keyframes動畫必須定義的屬性。5.animation-timing-function屬性格式：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out功能：該屬性規(guī)定動畫的速度曲線，取值與上一節(jié)transition-timing-function屬性相同。6.animation-delay屬性格式：animation-delay:<time>取值：延時時間以秒（s）或毫秒（ms）作時間單位，默認值為0s，即沒有延時。功能：該屬性定義動畫何時開始，允許負值。例如，animation-delay:-2s使動畫馬上開始，但跳過2秒進入動畫。CSS3.0動畫8.3

7.animation-direction屬性格式：animation-direction:alternate|normal取值：alternate：動畫輪流反向播放normal：動畫正常播放（默認值）。功能：該屬性定義是否應該輪流反向播放動畫。如果animation-direction值是"alternate"，則動畫會在奇數(shù)次數(shù)（1、3、5等等）正常播放，而在偶數(shù)次數(shù)（2、4、6等等）向后播放。如果把動畫設置為只播放一次，則該屬性沒有效果。CSS3.0動畫8.3

8.animation屬性格式：animation:<animation-name><animation-duration><animation-timing-function><animation-delay><animation-iteration-count><animation-direction>取值：animation-name：動畫名稱,即需要綁定到選擇器的keyframe名稱animation-duration：動畫時間值,即完成動畫所花的時間，以秒或毫秒計animation-timing-function：速率變化值，即動畫的速度曲線animation-delay：動畫延時值，即在動畫開始之前的延遲animation-iteration-count：播放次數(shù)值，即動畫應該播放的次數(shù)animation-direction：反向播放，即是否應該輪流反向播放動畫功能：animation屬性是一個簡寫屬性。將動畫與div元素綁定，必須規(guī)定animation-duration屬性，否則時長為0，就不會播放動畫了。8.3.2CSS3.0動畫效果案例8.3

案例8-3：本案例通過4個gif小天使動畫展示@keyframes結合animation屬性的效果。效果如圖8-41所示。在頁面中插入4個gif小天使圖片，采用@keyframes動畫展示animation效果。在不同的時間段自動改變小天使的位置和文字顏色，其中“天使1”僅使用keyframes動畫中必須定義的基本屬性：動畫名稱屬性、動畫持續(xù)時間屬性和播放次數(shù)屬性；“天使2”在“天使1”動畫的基礎上延時3秒鐘；“天使3”在“天使1”動畫的基礎上將動畫速率定義為ease-out減速，并且輪流反向播放；“天使4”使用animation簡寫，動畫延時2秒，速率為ease-in加速，只播放3次就停下。<body><divid="an1"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使1：必須的定義動畫名稱屬性、動畫持續(xù)時間屬性、播放次數(shù)屬性</div><divid="an2"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使2：動畫延時3秒</div><divid="an3"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使3：動畫速率為ease-out減速，并且輪流反向播放</div><divid="an4"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使4：使用animation簡寫，動畫延時2秒，速率為ease-in加速，只播放3次</div></body>

<style> #an1{ position:absolute;right:0; animation-name:mymove1; animation-duration:5s; animation-iteration-count:infinite;}@keyframesmymove1{ 0%{left:1000px;top:0px;color:red;} 20%{left:700px;top:0px;color:#3BBF87;} 60%{left:300px;top:0px;color:#B7070A;} 70%{left:100px;top:0px;color:#B7070A;} 80%{left:100px;top:300px;color:#E1C60C;} 100%{left:100px;top:600px;color:#3E0FDC;}}#an2{ position:absolute;right:0; animation-name:mymove2; animation-duration:5s; animation-iteration-count:infinite; animation-delay:3s;}@keyframesmymove2{ 0%{left:1000px;top:0px;color:red;} 20%{left:700px;top:0px;color:#3BBF87;} 60%{left:300px;top:0px;color:#B7070A;} 70%{left:100px;top:0px;color:#B7070A;} 80%{left:100px;top:300px;color:#E1C60C;} 100%{left:100px;top:600px;color:#3E0FDC;}}#an3{ position:absolute;right:0;top:30px; animation-name:mymove3; animation-duration:5s; animation-iteration-count:infinite; animation-timing-function:ease-out; animation-direction:alternate;}@keyframesmymove3{ 0%{left:1000px;top:30px;color:red;} 20%{left:700px;top:30px;color:#3BBF87;} 60%{left:300px;top:30px;color:#B7070A;} 70%{left:100px;top:30px;color:#B7070A;} 80%{left:100px;top:330px;color:#E1C60C;} 100%{left:100px;top:630px;color:#3E0FDC;}}#an4{ position:absolute;right:0;top:60px; animation:mymove45s3ease-out2snormal;}@keyframesmymove4{ 0%{left:1000px;top:60px;color:red;} 20%{left:700px;top:60px;color:#3BBF87;} 60%{left:300px;top:60px;color:#B7070A;} 70%{left:100px;top:60px;color:#B7070A;} 80%{left:100px;top:360px;color:#E1C60C;} 100%{left:100px;top:660px;color:#3E0FDC;}}</style>8.3.3任務8-3：基于CSS3.0動畫制作頁面8.3

1.任務描述制作如圖8-42所示的照明公司網(wǎng)站頁面。該頁面是具有動畫效果的網(wǎng)頁。導航超鏈接輪流以一種顏色漸變到另一種顏色；logo上的小星星會自動沿軌道移動；左側背景顏色不斷改變；圖片指示標記用兩種不同顏色交替閃爍。8.3

2.任務要求通過本任務的練習，掌握animation屬性結合@keyframes規(guī)則的基本設置；掌握@keyframes動畫的制作技巧；掌握利用@keyframes動畫實現(xiàn)元素屬性自動交替的方法。3.任務分析設置動畫的主要目的是引起讀者注意，使頁面更加生動。logo上的小星星通過時間段位置屬性的改變自動沿軌道移動；左側背景使用顏色模糊的徑向漸變，不間斷地改變漸變顏色，使之具有發(fā)光效果。導航有7個鏈接，每一個鏈接都各自實施一個7秒的動畫，該動畫在開始時間段（0%）到第1秒（14%）采用白色文字，第1秒（14%）到第2秒（28%）為金黃色，第2秒（28%）到第7秒（100%）都是白色。再讓每一個鏈接的動畫依次延時1秒開始，就形成了交替動畫。導航鏈接交替顯示白色金黃色文字，金黃文字每次顯示持續(xù)1秒的時間。圖片指示標記也是交替動畫，用兩種不同顏色交替閃爍。8.3.3任務8-3：基于CSS3.0動畫制作頁面8.3

8.3.3任務8-3：基于CSS3.0動畫制作頁面4.工作過程步驟1站點規(guī)劃（1）新建文件夾作為站點，站點內建立images文件夾，將本節(jié)圖片素材存放在images文件夾中；（2）新建網(wǎng)頁，設置<title>為“沿途有文”；將網(wǎng)頁命名為task8-3.html保存在站點所在的目錄。（3）建立網(wǎng)頁的基本結構<body><divid="container"> <header><divid="star"></div> <divid="nav"> <ul> <liclass="li1"><ahref="#">首頁</a></li> <liclass="li2"><ahref="#">公司簡介</a></li> <liclass="li3"><ahref="#">新聞中心</a></li> <liclass="li4"><ahref="#">產(chǎn)品展示</a></li> <liclass="li5"><ahref="#">案例展示</a></li> <liclass="li6"><ahref="#">人才招聘</a></li> <liclass="li7"><ahref="#">

溫馨提示

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

評論

0/150

提交評論