今日提及之動畫animation_ZenDei技術網路在線

今日提及之動畫animation

-Advertisement-

今天沒有說什麼內容，只是對HTML5的細節補充，如HTML結構的可以省略到最大的地步沒有了基本的結構標簽了，瀏覽器會自動幫我們生成。還有標簽的屬性的雙引號也可以省略； HTML5讓我體驗到它在最大化的簡化標簽，使代碼量最小化。還有調試工具的使用，調試工具讓我們更快的更準確的查到各方面的信息， ...

今天沒有說什麼內容，只是對HTML5的細節補充，如HTML結構的可以省略到最大的地步

<!DOCTYPE html>
<meta charset="UTF-8">
<title>animation</title>
這裡是放內容的

沒有了基本的結構標簽了，瀏覽器會自動幫我們生成。

還有標簽的屬性的雙引號也可以省略；

<input type=text>

HTML5讓我體驗到它在最大化的簡化標簽，使代碼量最小化。

還有調試工具的使用，調試工具讓我們更快的更準確的查到各方面的信息，

大大提高了寫代碼的效率，如console控制台的使用，可以快速的查找到錯誤在哪。

還有模擬各種設配的屏幕大小，響應式的測試，讓響應式代碼編寫提供方便。

還有一個網路network查看，可以讓看到各種請求的信息，和為優化頁面方面的信息，如

文件的大小。

今日內容到此，接下來是今天看到的一個響應式網站的動畫，而下麵是它的實現。

今天看到一個logo到彈出按鈕的過渡動畫，而它的實現是完全HTML5+css3的代碼。

所用到主要的知識是css3的animation屬性，還有一個div css sprites精靈，簡單叫法：圖片精靈；

什麼是圖片精靈？

其實就是通過將多個圖片融合到一張圖裡面，然後通過CSS background背景定位技術技巧佈局網頁背景。

這樣做的好處也是顯而易見的，因為圖片多的話，會增加http的請求，無疑促使了網站性能的減低，

特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。

然後開始實現：

首先要去目標網站拔圖片。

下麵是圖片：

然後是使用ps測總長度，測每個的間距，這個可以使用到切片工具，在你對圖片切割好時雙擊圖片會有個圖片的信息，如圖片所在的位置x,y，圖片的寬高w、h。

這樣就可以快點測出圖片的位置了，然後使用當前一張位置x減前一張個圖片位置x，就可以測出間距了。

先放效果圖：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
    #container{
        width: 200px;
        height: 130px;
        margin: 0 auto;
        background: url(圖片地址) no-repeat -58px -5px;
    }

    #container:hover{
        -webkit-animation:doMove 3s;
        animation: doMove 3s;
    }

    @keyframes doMove{
        0%{background-position: -58px -5px;}
        3%{background-position: -368px -5px;}
        6%{background-position: -678px -5px;}
        8%{background-position: -988px -5px;}
        10%{background-position: -1298px -5px;}
        12%{background-position: -1608px -5px;}
        13%{background-position: -1918px -5px;}
        14%{background-position: -2228px -5px;}
        15%{background-position: -2538px -5px;}
        16%{background-position: -2848px -5px;}
        17%{background-position: -3158px -5px;}
        18%{background-position: -3468px -5px;}
        19%{background-position: -3778px -5px;}
        20%{background-position: -4088px -5px;}
        21%{background-position: -4398px -5px;}
        22%{background-position: -4708px -5px;}
        23%{background-position: -5018px -5px;}
        24%{background-position: -5328px -5px;}
        25%{background-position: -5638px -5px;}
        26%{background-position: -5948px -5px;}
        27%{background-position: -6258px -5px;}
        28%{background-position: -6568px -5px;}
        29%{background-position: -6878px -5px;}
        30%{background-position: -7188px -5px;}
        31%{background-position: -7498px -5px;}
        32%{background-position: -7808px -5px;}
        34%{background-position: -8118px -5px;}
        36%{background-position: -8428px -5px;}
        38%{background-position: -8738px -5px;}
        41%{background-position: -9048px -5px;}
        45%{background-position: -9358px -5px;}
        48%{background-position: -9668px -5px;}
        60%{background-position: -9668px -5px;}
        100%{background-position:-9668px -5px; }
    }
@-webkit-keyframes doMove{
        0%{background-position: -58px -5px;}
        3%{background-position: -368px -5px;}
        6%{background-position: -678px -5px;}
        8%{background-position: -988px -5px;}
        10%{background-position: -1298px -5px;}
        12%{background-position: -1608px -5px;}
        13%{background-position: -1918px -5px;}
        14%{background-position: -2228px -5px;}
        15%{background-position: -2538px -5px;}
        16%{background-position: -2848px -5px;}
        17%{background-position: -3158px -5px;}
        18%{background-position: -3468px -5px;}
        19%{background-position: -3778px -5px;}
        20%{background-position: -4088px -5px;}
        21%{background-position: -4398px -5px;}
        22%{background-position: -4708px -5px;}
        23%{background-position: -5018px -5px;}
        24%{background-position: -5328px -5px;}
        25%{background-position: -5638px -5px;}
        26%{background-position: -5948px -5px;}
        27%{background-position: -6258px -5px;}
        28%{background-position: -6568px -5px;}
        29%{background-position: -6878px -5px;}
        30%{background-position: -7188px -5px;}
        31%{background-position: -7498px -5px;}
        32%{background-position: -7808px -5px;}
        34%{background-position: -8118px -5px;}
        36%{background-position: -8428px -5px;}
        38%{background-position: -8738px -5px;}
        41%{background-position: -9048px -5px;}
        45%{background-position: -9358px -5px;}
        48%{background-position: -9668px -5px;}
        60%{background-position: -9668px -5px;}
        100%{background-position:-9668px -5px; }
    }


    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

這裡只做了Chrome 和 Safari 的相容；

Chrome 和 Safari 的首碼 -webkit-。

如需要相容其他自己相容。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

深入理解javascript對象系列第二篇——屬性操作

[1]屬性查詢 [2]屬性設置 [3]屬性刪除 [4]屬性繼承 ...
html確認密碼

今天準備分享一個小知識點，就是確認登錄界面 <body > <form> 輸入戶名： <input type="text" name="name"/> <P>輸入密碼： <input type="password" name="pw" id="pw1"/></P> <p>確認密碼： <input t ...
jQuery的toggle()的自動觸發真煩人

jQuery的toggle()方法應該是在滑鼠點擊後才會觸發，現在的問題是在ready載入後就自動觸發了，怎麼回事呢？答案是jQuery的版本問題，在1.9以後的版本toggle()就存在這個問題，用之前的版本就正常了。如果你非常喜歡這個功能，有2個辦法，一個辦法是jquery官網提供的一個版 ...
html用戶註冊界面

先上一張簡約的界面的效果圖這裡是style裡面的內容再來body裡面的內容,這裡用到的是失焦 onblur 和聚焦 onfocus <body> <center> <div> <form> <h3>用戶註冊</h3> <hr> <p>用戶名:<input type="text" id="name ...
混淆篇之數組的常用方法總結

序號方法舉例是否改變當前數組 1 instanceof 判斷變數是否是數組對象否 2 join 將數組的元素組起一個字元串 join(separator) //將數組的元素組起一個字元串，以separator為分隔符，省略的話則用預設用逗號為分隔符 arr1 = [1,2,3,4,5]; r ...
JavaScript 基礎第七天（DOM的開始）

一、引言 JavaScript的內容分為三個部分，這三個部分分別是ECMAScript、DOM、BOM三個部分組成。所謂ECMAScript就是JavaScript和核心基礎語法，DOM是文檔對象模型，最後剩下的BOM則是瀏覽器對象模型。這三個部分相輔相成組成了現在的JavaScript。二、導入 ...
移動開發中單頁非同步載入所有列表項

在做WEB開發的時候我們經常會遇到分頁的處理，如果在PC上顯示網頁的話，使用傳統的分頁是可以接受的。那麼，當我們為手機或其他移動端設計界面的話，使用分頁未免有些笨拙和難以使用，這時候我們可以使用在單頁載入所有列表項。當屏幕滑動到最低端的時候，會出現“點擊載入更多”的按鈕，當我們點擊此按鈕的時候，會加 ...
變數名提升

名字的聲明就是讓我的解釋器知道有這個名字名字沒有任何數據與之對應函數聲明包含兩部分首先告訴解釋器函數的名字告訴解釋器這個名字對應的函數體是什麼函數聲明與函數表達式有區別，函數聲明是單獨寫在一個結構中，不存在任何語句，邏輯判斷等結構中 ``` 函數聲明： function(){} func ...