這裡是修真院前端小課堂，本篇分析的主題是
【用css寫乙個簡單的幻燈片效果頁面】
每篇分享文從
八個方面深度解析前端知識/技能，本篇分享的是：
【用css寫乙個簡單的幻燈片效果頁面】
css3屬性中有關於製作動畫的三個屬性：transform,transition,animation。
transform屬性向元素應用2d或3d轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
transition是令乙個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。
animation字面上的意思，就是「動畫」的意思，
我們使用css3的animation製作動畫，實現簡單的幻燈片效果，可以省去複雜的js,jquery**。animation有一點不足之處，
我們運用animation能建立自己想要的一些動畫效果，但是有點粗糙，如果想要製作比較好的動畫，大家還是使用flash或js等。
animation: name duration timing-function delay
iteration-count direction fill-mode play-state;
對應：animation:marginleft 10s linear 2s infinite
100 reverse paused
在開始介紹animation之前我們有必要先來了解乙個特殊的東西，那就是"keyframes",我們把他叫做「關鍵幀」。
乙個開始執行動作時間和乙個延續動作時間以及動作的變換速率，其實這些值都是乙個中間值，
如果我們要控制的更細一些，比如說我要第乙個時間段執行什麼動作，第二個時間段執行什麼動作，
此時我們需要這樣的乙個「關鍵幀」來控制。那麼css3的animation就是由「keyframes」這個屬性來實現這樣的效果。
@keyframes規則
相容性該如何解決
在css3中建立動畫，您需要學習@keyframes規則。
keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，
後面緊接著是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不同時間段樣式規則，
有點像我們css的樣式寫法一樣。對於乙個"@keyframes"中的樣式規則是由多個百分比構成的，
如「0%」到"100%"之間，我們可以在這個規則中建立多個百分比，
我們分別給每乙個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，
比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，
我們可以使用「fromt」「to」來代表乙個動畫是從哪開始，到哪結束，
也就是說這個"from"就相當於"0%"而"to"相當於"100%",值得一說的是，
其中"0%"不能像別的屬性取值一樣把百分比符號省略。
internet explorer 11、firefox以及opera支援@keyframes規則和animation屬性。
如何用jq寫幻燈片效果頁面.
ppt鏈結
如何用css寫乙個簡單的幻燈片效果頁面？
css3屬性中有關於製作動畫的三個屬性 transform,transition,animation。transform屬性向元素應用2d或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。transition是令乙個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。animatio...
做乙個自己的LaTeX幻燈片模板
對本文進行了翻譯，執行了用例，加了部分注釋。在目錄中建立以下檔案 1.beamercolorthemetexsx.sty 2.beamerinnerthemetexsx.sty 3.beamerouterthemetexsx.sty 4.beamerthemetexsx.sty 5.texsx ex...
簡單說 用CSS做乙個魔方旋轉的效果
魔方大家應該是不會陌生的，這次我們來一起用css實現乙個魔方旋轉的特效，先來看看效果圖！我們要做這樣的效果，重點在於怎麼把6張，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在於用好css的transform，這是非常重要的，好的，我們先拼出乙個魔方的樣子。效果圖 比較長，朋友們可以直接貼上複製到...