H5Css3動畫背景圖製作幀動畫

阿新 • • 發佈：2019-01-19

<span class="css-class" style="color: rgb(255, 0, 255);"><span class="before">
</span></span>

<span class="css-class" style="color: rgb(255, 0, 255);"><span class="before">.</span>running</span><span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">60<span class="after">px</span></span>;
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">90<span class="after">px</span></span>;
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">position<span class="after">:</span></span>absolute;
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">top<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">50<span class="after">%</span></span>;<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">left<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">70<span class="after">%</span></span>;
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background<span class="after">:</span></span>url(<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">http<span class="after">:</span></span><span class="comment comment-line" style="color: rgb(34, 34, 204);"><span class="before" style="color: rgb(187, 170, 170);">//</span>img.xiaoho.com/2014/12/test.png) no-repeat 0 0;</span>
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">visibility<span class="after">:</span></span>hidden;
        <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">-webkit-animation<span class="after">:</span></span>run 350ms steps(1) infinite 5s;				
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>

<span class="keyword css-at-rule" style="color: rgb(0, 0, 255);"><span class="before">@</span>-webkit-keyframes</span> run <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>	
	<span class="css-length" style="color: rgb(0, 0, 255);">0<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
	<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">visibility<span class="after">:</span></span>visible;
       	<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span>0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	<span class="css-length" style="color: rgb(0, 0, 255);">20<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
       <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-90<span class="after">px</span></span> 0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	<span class="css-length" style="color: rgb(0, 0, 255);">40<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
       <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-180<span class="after">px</span></span> 0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	<span class="css-length" style="color: rgb(0, 0, 255);">60<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
       <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-270<span class="after">px</span></span> 0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	<span class="css-length" style="color: rgb(0, 0, 255);">80<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
       <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-360<span class="after">px</span></span> 0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	<span class="css-length" style="color: rgb(0, 0, 255);">100<span class="after">%</span></span> <span class="paren css-block-open" style="color: rgb(255, 0, 255);">{</span>
       <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153);">background-position<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255);">-450<span class="after">px</span></span> 0;
    <span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>
	
<span class="paren css-block-close" style="color: rgb(255, 0, 255);">}</span>

html程式碼：

<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>running<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>layout<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
	<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>bar<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>

H5Css3動畫背景圖製作幀動畫

<span class="css-class" style="color: rgb(255, 0, 255);"><span class="before"> </span></span><span class="css-

使用TexturePacker打包遊戲貼圖製作幀動畫

TexturePacker是個非常好用的貼圖打包工具,最近我在學習cocos2d-x,正巧聽說了這個工具,試用了一下,非常不錯.分享給大家比如我有一些動畫幀,為了讓動畫更加流暢,我們將所有的動畫幀合成一張圖,然後通過每次展示一部分圖片來達到動畫效果如果是美工來拼接,他

IOS多媒體-使用UIImageView製作幀動畫

首先匯入一組連續拍攝的圖片到資原始檔中建立一個UIImage陣列並將圖片新增到陣列中 var images = [UIImage]() for i in 1...19 { images.a

[Xcode10 實際操作]六、媒體與動畫-(13)使用UIImageView製作幀動畫

本文將演示如何將匯入的序列圖片，轉換為幀動畫。在專案導航區開啟資原始檔夾【Assets.xcassets】【+】->【Import】->選擇圖片->【Open】在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】 1 import UIK

【工作記錄0018】Hightcharts 設定載入中動畫背景圖，防止頁面假死

使用ajax非同步請求資料並顯示到圖示中，當每頁顯示圖示數量或者資料列越多時，渲染越慢，等待時間更多，最終造成了頁面的假死狀態(頁面在完成資料請求和渲染新圖之前沒什麼動靜)。為了防止假死狀態，更為了更好的使用者體驗，hightcharts提供了載入中動畫配置。 1.high

Android開發——動畫使用篇章（幀動畫，補間動畫）（一）

Android 動畫分為 view動畫，幀動畫，屬性動畫，本片文章是參考多篇動畫介紹部落格，總結動畫使用API，使用場景。適合日常開發搬磚使用。幀動畫幀動畫是最容易實現的一種動畫，這種動畫更多的依賴於完善的UI資源，他的原理就是將一張張單獨的圖片連貫的進行播放，從而在視覺上

Android三種動畫View Animation(補間動畫) 、Drawable Animation(幀動畫) 、Property Animation(屬性動畫)（下）

轉載：http://blog.csdn.net/lmj623565791/article/details/38092093 三種動畫的優缺點： (1)Frame Animation(幀動畫)主要用於播放一幀幀準備好的圖片，類似GIF圖片，優點是使用簡單

Android 動畫（一）幀動畫、補間動畫

1.Frame Animation（幀動畫）幀動畫就是把多張圖片在定義的短時間內完成順序播放，最終呈現在視覺上的動態效果；幀動畫首先得具有圖片資源。下面是幀動畫在Android開發中的具體實現：（1）activity_main.xml檔案： <

Android動畫-Frame Animation（幀動畫）

Android動畫主要分為以下三類： Tweened animation（補間動畫）- 在android3.0（API11）之前支援，該動畫僅僅支援對View操作，而且View在做動畫的時候，View相應的實際屬性值並沒有發生改變，例如：一個Button起始位置left，to

Cocos2d-x 3.0final 終結者系列教程22Cocos Studio動畫編輯器的幀動畫和骨骼動畫詳解

建立骨骼動畫首先，開啟Cocos Studio 的 Animation Editor（動畫編輯器），新建一個動畫工程。同Spine一樣，Cocos Studio動畫編輯器也有兩種模式，但這裡是形體模式和動畫模式。使用者需要在形體模式下組裝角色部件，併為其繫結骨骼；並在動畫模式下調整骨骼相應屬性生成

OpenGL ES 從零開始系列9：動畫基礎和關鍵幀動畫

Creating a Rotation Matrix from a Quaternion 從一個四元數中建立旋轉矩陣這另外的一個方法相對簡單些。並且這個基本演算法來自於Matrix FAQ，雖然我需要把它轉換成行優先的順序。 static inline void Matrix3DSetUsingQuater

原生js製作勻速動畫與輪播圖注意事項

筆者最近在創作輪播圖，碰到了不少坑，特此分享 1.輪播圖需要製作多一張圖片作為緩衝，使用cloneNode來實現： //1.1必須克隆li標籤，用來過渡動畫 $('ul').appendChild(lis[0].cloneNode(true)); 2.在製作勻速動畫

[Xcode10 實際操作]九、實用進階-(20)建立位移關鍵幀動畫：通過新增運動關鍵點製作位移動畫

本文將演示如何通過新增運動關鍵點的方式，來製作位移動畫在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】 1 import UIKit 2 3 //新增一個代理協議CAAnimationDelegate 4 class ViewControl

筆記八：EgretH5通用MVC框架的入門操作：製作並播放幀動畫（UI部分）

前言：幀動畫是遊戲中最常用的的兩種動畫播放形式之一，其中一種是骨骼動畫，一種就是幀動畫了，在H5遊戲中，幀動畫一般用於UI介面的操作動畫，人物技能，特效什麼的。本筆記基於通用MVC框架，以及“筆記一”中的scene搭建的範例，基於原始碼我的資源中的《筆記一到筆記七原始碼》，最

css精靈圖寫序列幀動畫

最近寫一個H5要求序列幀動畫比較多，但是卻僅僅是作為裝飾，而不對其進行操作，為了減小記憶體以及更好的效能選擇了css動畫+css精靈圖的方式。 1.找工具製作css精靈圖。聽說Win系統的css sprite很好用，可惜m

Android DrawableAnimation逐幀動畫載入多圖（OOM的解決）

想做一個逐幀動畫，用了一百來張圖片，結果記憶體溢位了，找了半天最後算是解決了。本來是在drawable裡面寫一個animation-list，設定ImageView的backgroud，然後在Activity裡面animationDrawable = (Animatio

利用css3-animation來製作逐幀動畫

前言趁著還沒有元旦之前先碼一篇文章，不然到時候估計又被各種虐了，所以趁現在還有力氣先來一篇。今天來聊聊css3中的動畫屬性animation，對這個屬性懵懂是在很早的時候有前輩用這個 animation 屬性來寫了一個菊花打轉的loading，然後google了一下知道了有這麼一個css動畫元件叫做 an

Canvas 繪製圖像的三種方法、實現幀動畫

繪製圖像的三種方法 /* * 繪製圖像 * ctx.drawImage(); */ //第一種版本三引數版本context.drawImage(i

cocos-js 播放cocostudio製作的幀動畫

cocostudio製作的幀動畫有三個檔案 .ExportJson .plist 和.png 程式碼： ccs.armatureDataManager.addArmatureFileInfo(res.animation_json); var layer =new

【Unity】Unity製作序列幀動畫

工具：PhotoShop + Unity + 腦子首先你的有素材沒有可以在這裡下載 http://download.csdn.net/download/ldy597321444/10042175

H5Css3動畫 背景圖 製作幀動畫

html程式碼：

相關推薦

H5Css3動畫背景圖製作幀動畫