服務宗旨

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

我們的成立宗旨就是要以最猛的IT技術讓這個世界更Smart,在我們貫徹我們裡想的同時,我們希望可以把我們所開發的系統帶給台灣的中小企業,除了要推薦好的東西之外,我們也希望做點改變,所以我們的第一目標就是要使用最好用的系統再加上您寶貴的創意,不僅僅可以節省你大量的荷包,還可以有一個像樣的網站。我們可以幫你做的有

企業管理
  • 策略管理
  • 目標管理
  • 行銷管理
  • 財會管理
  • ERP導入
  • 企業流程自訂
資訊管理
  • 網站架設
  • 虛擬化/雲端架設
  • 主機代管
  • 私有雲建制與導入
軟體開發
  • UML設計
  • 版本控管
  • 企業軟體開發
  • APP開發
  • 網頁設計
資訊安全
  • 網頁弱點掃描
  • 主機弱點掃描
  • 木馬檢測
  • 資安鑑識
  • 設計網路架構
  • 資安監控
行銷
  • 關鍵字SEO
  • 社群網路行銷
  • 部落格行銷
  • FaceBook 粉絲團
其他
  • 協助企業申請Google Email
好玩工具開發

講出你的創意吧!沒有甚麼是資訊辦不到的

2016年7月20日 星期三

HTML CSS 動畫教學–【軟體開發(軟件開發)】

 今天 Allen 我想教大家如何在設計網頁時,透過簡單的 CSS 語法,來做到簡易的動畫效果,而且過程完全用不到 Java Script 語法….
下載
  這邊我們是直接使用 CSS Animation Level 1 所定義的 CSS 規則,而想學習更詳細的功能定義,可以花時間閱讀 http://www.w3.org/TR/css3-animations/ .. 這邊我只簡單列舉我們常會用到的屬性列表,列表如下:
在 animation 相關屬性的部份,可以使用的 CSS 屬性有:
CSS 屬性    說明
animation-delay    設定網頁元素在被載入之後到開始播放動畫之間的等待時間。
animation-direction    設定網頁元素在動畫播放完之後,是否要以相反方向的方式播放,或是從頭開始以原來的方向重複播放。
animation-duration    設定整個動畫播放一次的時間長度。
animation-iteration-count    設定動畫播放的次數,若要不斷重複播放,則可設為 infinite。
animation-name    設定 @keyframes at-rule 所使用的動畫名稱。
animation-play-state    這個屬性可用來暫停或繼續動畫播放。
animation-timing-function    透過加速曲線(acceleration curves),設定動畫播放的速度。
animation-fill-mode    設定動畫元素在播放前與播放後,如何套用 CSS 的樣式。


在開始實作 HTML CSS 動畫前,我們必須把握 3 個主要步驟,
1. 我們必須使用 @keyframes 來定義與建立我們所需要的動畫。
@keyframes 是讓我們用來定義與建立動畫的內容,換句話說就是用來指定動畫的畫格(frame)是如何轉變。
使用關鍵影格定義動畫流程
  在你設定了動畫的時間資訊之後,你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 @keyframes )。關鍵影格描述了該元素在漸變過程中的外觀。
  因為動畫漸變時間已經在 CSS style 中被定義,所以關鍵影格使用 percentage 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點,而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義,如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要,所以這兩個時間點有特殊的別名: from 和 to。
2.在 HTML 的 Style 設定好我們要套用的 css animations 屬性以及屬性值。
3.思考我們要實作的動畫,會需要影響那些 HTML 支援的屬性,例如 背景顏色 (background-color)、img元素的Url 圖片變更、某個HTML 元素位置轉移(top、left、position) 等等。

開始動手實作:
1.我們首先在 Head 的 <style> 裡宣告以下語法:
  @keyframes moving {
            from { background-position: 0% }
         
            to   { background-position: 100% }
        }
/*這段語法,是宣告一個動畫名稱為 moving ,它將從背景圖位置 0% 到 100 %,就是從左到右移動。*/
2.宣告 <body> 的元素內容,如下語法:
body {
           background-image : url(media/ironman.jpg);
            background-repeat : no-repeat;
            background-position: center center; 
            height: 500px;
            
            animation: moving 30s linear infinite;         }
重點語法,我把它標示為藍色字體,第一行~第三行 分別只是簡單的設定,背景圖為那個位置,這邊是存放在 media/ironman.jpg,最重要的動畫語法為 animation: moving 30s linear infinite;
就是設定在 body 元素裡,我們要套用 CSS 動畫,而 moving 就是我們步驟 1 @keyframes moving 
設定的動畫名稱。
完成上述很簡單的語法,我們連 Java Script 程式碼,一行都沒寫,就可以完成簡易動畫了,執行結果如下圖
image


網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen


0 意見:

張貼留言

如您對本文有任何建議或意見,歡迎您留下您寶貴的意見!