建立 HTML5 的應用程式

  • 發行項

CSS3 效果、轉換及動畫

Clark Sell

 

作為 Web 開發人員，您有三個工具，你可以使用你的願景，並使它現實：HTML，CSS 和 JavaScript。 這並非總是如此。 在過去，看似簡單的效果，例如文本陰影或漸變送你要單獨的影像編輯器而不是使用 CSS 和 HTML。 雖然你沒有 JavaScript，使 Web 應用程式液和活著通常需要大量的編碼。 最初，構建應用程式的這些技術複雜不但不小的任何更改都代價高昂。

幸運的是，CSS3 和 HTML5 消除圖像和 JavaScript 體操過去的需要。 您可以生成光滑的相互作用和簡單的聲明性標記的美麗經驗。

現在，如果你像我一樣，你可能也只被淺笑有點。 就因為它是 CSS 和 HTML 並不意味著它很簡單。 但您將看到，通過學習幾個新的 CSS 屬性和試穿出一些很酷的演示，您就會保存無數的開發時間 — — 更不用提小時花談判需要與您的用戶端的特殊效果。

陰影

讓我們開始輕鬆，看看某些基本的陰影效果。 對我來說，影響是所有有關變更物件的看法。 例如，看一看文本陰影和框中的陰影圖 1。

Shadow Effects
圖 1 的陰影效果

這種效應提供了擊球的物件和該物件反過來周圍的物體蒙上陰影的方向性光源的錯覺。 這有助於給的深度知覺和甚至可能有人會說它有助於看起來像漂浮的物件。

添加陰影並不難，所以讓我們添加一個標題文本陰影：

    h1 {
      text-shadow: black 2px 2px 12px 2px;   
    }

這裡有不同的文本陰影屬性：

  • 陰影顏色 （可選）。 您可以指定一種顏色的名稱，或者您可以使用 HSL 或 RGBA 顏色代號。
  • 水平位移量 （必填）。 這表明陰影的水準的位置。 值為正的物件 ； 右側移動陰影 負值表示向左移動它。
  • 垂直位移量 （必填）。 此選項設置陰影的垂直位置。 正值移動到底部 ； 陰影 值為負時會將其移動到頂部。
  • 模糊半徑。 此值定義陰影文本將顯示如何清除。 中是字體本身 ； 增加值越來越模糊的物件的邊緣。 不允許出現負值。
  • 傳播距離。 此值設置從陰影的距離 — — 如何陰影的形狀會外表擴展 （正值） 或合約內心 （負值）。

框陰影作為文本陰影的工作方式相同，並且具有相同的參數：

    box-shadow: red 10px 10px 0px 0px;

陰影是很常見的。 它們使用的元素 （如按鈕提供深度，讓使用者知道元素的目的。 他們説明點使用者的事實是某種程度上不同于其他物件可以在使用者介面中看到某個特定物件。 在過去，你很可能轉向 Photoshop，創建 Png 來表示按鈕 ； 現在你可以在標記中。 當然，我只我在這裡抓在表面。 通過調整不透明度、 邊框半徑、 漸變、 排版，等等，您可以創建許多更顯著的效果。

轉換

CSS 變換屬性允許您變換的規模或空間給定的元素。 要證明，讓我們設置一個圖像，以便當使用者的滑鼠經過，圖像變為兩倍一樣大：

    #myImg:hover {
      transform: scale(2);
    }

當然，這是 CSS，這意味著你真的需要包括適用的供應商的任何首碼。 我將會忽略它們餘下的這篇文章，但前面變換應該已經變成了這個樣子：

    #myImg:hover {
      -ms-transform: scale(2);
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -o- transform: scale(2);
      transform: scale(2);
    }

你也會想要利用特徵檢測。 這實際上是其中一個最重要的做法，今日 （星期三） 在您的 Web 網站中實現。 而不是基於使用者代理的網站的行為，您應利用工具 （如 Modernizr (modernizr.com），它可以讓你問瀏覽器及其功能。 如果使用者的瀏覽器不支援某一特定的功能，您需要，您可以使用 polyfill — — 實現為瀏覽器功能的墊片。 這是 css 甚至可能。 有關詳細資訊，請檢查"留下了沒有瀏覽器：HTML5 通過戰略"在 msdn.microsoft.com/magazine/hh394148。 現在回到變換。

除了縮放時，還可以在 2D 或 3D 的平面上應用變換。 使用 2D、 要移動其 X 和 Y 軸的元素。 讓我們採取一些文本，並將其旋轉 45 度：

 

    .transform2d {
      transform: translate(0px, 0px)
                 rotate(45deg)
                 scale(1.45)
                 skew(0deg, 0deg);
    }

圖 2 顯示一個框，一直旋轉 45 度。

Transforming an Element in 2D Space
圖 2 轉變在二維空間中的元素

現在 2D 是偉大的但顯然 3D 今天是憤怒 — — 和，不，我們不想問我們的使用者要戴上任何特殊的眼鏡，但我們不希望人們認為我們的盒子即將走出螢幕。 這裡是一些代碼來做到這一點：

    .transform3d {
      transform-origin-x: 50%;
      transform-origin-y: 50%;
      transform: perspective(110px) rotateY(45deg);
    }

結果將顯示在圖 3。

A 3D Transform
圖 3 3D 轉換

過渡

現在讓我們研究一下讓您更改元素從一個樣式或狀態到另一個的過渡。 我先用懸停偽類。 歷史上我們已經使用 CSS 設置元素，如它的初始狀態和事件發生後的其狀態的國家。 按鈕元素和錨點連結有兩個國家 — — 的初始狀態、 懸停狀態。 當使用者啟動懸停狀態時，獲取或設置這些屬性。 下面是一個簡單的例子，對於懸停在按鈕：

    #boxTrans:hover {
      background-color: #808080;
      color: white;
      border-color: #4cff00;
      border-width: 3px;
    }

標準的東西，而且無疑你幹過此事。 今天的瀏覽器是如此之快的狀態過渡是幾乎瞬間即可完成。 這是偉大從性能的角度，但它提供了一個新的問題。 在某些情況下，該狀態更改可能會刺耳或不甚至可見。 它是完全有可能，使用者將永遠不會看到該快速而微妙的變化。

使用 CSS3 的過渡，您可以管理過渡發生的時間和控制以及轉型期的其他方面。 例如，而不是一個只會自動更改其背景顏色的按鈕，您現在可以指定應該在這種變化過程中發生了什麼。

添加一個 CSS 過渡很容易 — — 您將過渡命令添加到基本元素。 作為一個例子，讓我們創建一個簡單的框中它的一些文本。 當使用者將懸停那個盒子時，應更改背景色、 文本和邊框：

    #boxTrans {
      ...
    transition: all .5s linear;
      ...
    }
    #boxTrans:hover {
      background-color: #808080;
        color: red;
        border-color: green;
    }

正如您所看到的我的 #boxTrans 元素定義了過渡期。 我選擇此元素的所有屬性的都過渡，我希望他們線性所有轉 (就是以恒定速度) 過去的.5s。 我還可以選擇特定的屬性，以過渡通過指示只有這些屬性，如下所示：

    transition: background-color .5s linear;

動畫

與過渡，在你告訴瀏覽器的開始和結束的國家，不同的動畫您指定一系列的 CSS 屬性在給定時間。 動畫其實只是過渡的擴展。 要創建動畫，請使用一個關鍵幀。 在設置為該整體的動畫的持續時間內的時間，你能想到的一個關鍵幀作為在某一給定的項的狀態。 讓我們創建一個簡單的動畫 — — 一個小框，來回滾動。 首先，我將定義元素：

    <html>
    ...
    <div class="box" id="boxAnimation"></div>
    ...
    </html>

讓我們給該 div boxAnimation 一點風格看上去就像一盒：

    <style>
    ...
    .box {
      border: 1px solid black;
      background-color: red;
      width: 25px;
      height: 25px;  
      position: relative;
      }
    ...
    </style>

這地方，我就會定義基本的動畫。 我需要設置動畫的關鍵幀和其持續時間。 如果您不設定持續時間屬性，因為預設值是 0，將永遠不會運行動畫。 我也會讓我期望運行 ； 動畫的反覆運算次數 在這裡我想它能夠運行 10 倍 5 秒每個 （如果您願意，您可以設置動畫反覆運算次數向無限，而會告訴動畫來運行，只要打開的網頁是）：

    #boxAnimation {
      animation: 'not-knight-rider';
      animation-duration: 5s;
      animation-iteration-count: 10;
    }

最後，還需要定義本身的關鍵幀。 我要開始一個簡單的關鍵幀，會在螢幕上移動框。 要做到這一點，我設置和屬性，讓瀏覽器照顧的其餘部分：

    @keyframes not-knight-rider {
      from {
        left: -100px;
      }
      to {
        left: 100px;
      }
    }

如果您運行此，您將看到一個紅色的框，漂浮在螢幕，然後重複。 如前所述，你有動畫的完全控制。 讓我們來更新該關鍵幀，以實際控制框中的什麼時候在哪裡，究竟在做什麼，如中所示圖 4。

圖 4 控制動畫

    @keyframes not-knight-rider {
      from {
        left: -100px;
        opacity: 0;
      }
      25% {
        left: 100px;
        opacity: 0.5;
      }
      50% {
        left: -100px;
        opacity: 0;
      }
      75% {
        left: 100px;
        opacity: 0.5;
      }
      to {
        left: -100px;    opacity: 0;
      }
    }

在圖 4，我定義關鍵幀將在某一給定一個反覆運算中做些什麼。 我的定義 （到） 的起始點和結束點 （從），以及點之間，為其定義的期限內的百分比表示。 坦白說，不很難。 現在引發了這些創意的果汁來與一些邪惡的動畫 — — 那是一個不同的故事 ！

再次，要支援所有不同的瀏覽器市場上今天你必須使用相應的供應商首碼。 在關鍵幀，這看起來類似 @ webkit 關鍵幀，等等。

請注意您可以看到這篇文章線上時所述的所有樣本的工作示例 bit.ly/I0Pa4d，和您還應該檢查出系列令人難以置信的互動，動手 CSS3 演示在 bit.ly/pF4sle，可以不必過實際編寫 CSS 的流覽大量不同的 CSS 規格。

您可能會注意到這些演示是關於 Windows 8。 這是因為 Windows 8 的到來，Windows 團隊引入一種新的程式設計模型。 Web 開發人員現在可以運用他們的技能，並生成一個本機應用程式使用 HTML5 和 CSS3 JavaScript 的 Windows 8 的。 微軟剛開了一個完全新的表面領域，供您在世界各地銷售您的應用程式 ！ 我鼓勵您簽出該 Windows 開發中心在 dev.windows.com。

這是一個激動人心的時刻，是一個軟體發展者，Web 或其它方式。 技術進步如此之快，很容易被淹沒的新工具的所有您工具箱中。 不管怎樣，它是重要的是要向前看和理解的工具和技術，您可隨時。 你想要做的最後一件事是創建一群漂亮的圖像時，您可以只需添加幾行的 CSS 實現的投影的開始。

Clark Sell 作品作為微軟在芝加哥以外的高級 Web 和 Windows 8 宣傳員。在他博客 csell.net，在播客 developersmackdown.com ，可以發現在 Twitter 上 twitter.com/csell5。

由於下面的技術專家，檢討這篇文章：John Hrvatin 和 Brandon Satrom