-
不錯查看全部
-
animation活潑；生氣<br> webkit,moz是不同瀏覽器的前綴 animation-name規定要綁定的keyframes的名稱，為了日后的維護方便，一般都是取一個跟動作名稱相近的名稱<br> animation-duration規定完成這個動畫所需的時間<br> wrap:外套 walk行走查看全部
-
absolute：絕對的；絕對的食物；完全的；查看全部
-
Sizzle：vi:發嘶嘶聲;vt.把...燒得發嘶嘶聲;n.嘶嘶聲查看全部
-
頁面之間的卷滾切換效果 頁面的橫向布局我們已經實現好了，那么如何實現頁面與頁面之間的切換呢？ 一般來說要根據布局的結構來，大體有2種： 移動父容器，改變父容器的坐標 移動每一個子容器的坐標 顯而易見，移動父容器簡單很多，只需要改變父容器X軸的坐標就可以了。如果父容器中子元素有很多的話，那么我們會考慮第二種算法，可以做成動態加載，但是這種處理是超級麻煩，這里不討論 改變坐標的處理可以分為2種： 傳統的top,left坐標修改 CSS3中的transform屬性 傳統的就是修改元素style是坐標屬性，這個沒什么好說的，使用簡單，一般都需要配合定時器使用。 CSS3引入了一個新的屬性Transform transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其中會有一個值translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的，translate3d這里指明了3d就是啟用了3d加速，也就是啟動GPU來處理，性能更強 過去，為了實現這種平滑的過渡效果，我們需要借助于Flash技術，現在只需要簡單的使用CSS3 Transition的方法就可以實現，這是一個簡單的動畫屬性 transition可以設置一些具體的參數，比如動畫執行的時間，變化的算法、動畫延時等等，具體大家可以搜索更細致的資料 這里需要特別注意的就是： transform屬性是靜態屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程 簡單的一句話描述就是 通過設置transition的一些參數，讓translate3d這個屬性發生變化 如何通過translate結合transition改變元素的頁面位置，我們具體看到右邊的代碼 通過點擊"點擊頁面開始切換"出現頁面切換的效果 任務 打開index.html文件，在代碼的102行填入相應代碼，這樣能讓頁面開始滾動 element.css({ 'transition-timing-function': 'linear', 'transition-duration': '5000ms', 'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //設置頁面X軸移動 });查看全部
-
CSS3動畫效果屬性 transition 4個屬性 transition-property 規定設置過渡效果的 CSS 屬性的名稱。 transition-duration 規定完成過渡效果需要多少秒或毫秒。 transition-timing-function 規定速度效果的速度曲線。 transition-delay 定義過渡效果何時開始。 [ 收起全文 ]查看全部
-
頁面的橫向布局 本章正式進入七夕這個主題效果是如何實現的講解，首先回顧下視頻的內容：整個效果都是以小男孩走路為前提，在三個主題頁面中切換并在每個主題頁面中會有不同的效果呈現 我們可以這樣理解，效果上 頁面主題會滾動 小男孩會走動 通過二者的速率變化，可以讓用戶產生一個視覺上的錯覺，也可以稱為視覺差，感覺就是人物在不斷走路前行 從頁面的效果，考慮頁面整體布局結構應該需要這樣 頁面是一個橫向的 包含了3個主題頁面 頁面之間是無縫拼接的 頁面還要能滾動 布局上很好處理，我們做3個塊級元素，每一個塊元素代表一個主題頁面的容器節點。然后設置一個父容器是3個塊元素的寬，通過float處理，這樣就形成了一個橫向的3個無縫拼接的頁面 頁面布局結構如下 <ul class='content-wrap'> <!-- 第一副畫面 --> <li> 頁面1 </li> <!-- 第二副畫面 --> <li> 頁面2 </li> <!-- 第三副畫面 --> <li> 頁面3 </li> </ul> 這樣雖然是形成了橫向布局與無縫拼接，不過可視區范圍永遠只能顯示出一個主題頁面的尺寸，所以我們需要再給祖先節點上套一個限制顯示區域的節點 在實現上，通過CSS布局是可以直接處理的。本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸 具體的實現我們參考右邊的代碼區域 任務 打開index.html文件，在代碼的24行填入相應代碼，通過溢出隱藏多余的頁面 hidden 在80行填入相應代碼，通過JS動態設置每一個元素的尺寸 slide.css({ width : width + 'px', height : height + 'px'查看全部
-
第八部分查看全部
-
第七部分查看全部
-
第六部分查看全部
-
第五部分查看全部
-
第四部分查看全部
-
第三部分查看全部
-
第二部分查看全部
-
第一部分查看全部
舉報
0/150
提交
取消