成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3幀動(dòng)畫

Nino / 1493人閱讀

摘要：在制作幀動(dòng)畫的時(shí)候，一般采用雪碧圖的方式，通過(guò)切換圖片的位置，使其連續(xù)播放，從而形成動(dòng)畫。使用改造之后的代碼，利用偽類進(jìn)行背景填充，然后控制該元素移動(dòng)來(lái)實(shí)現(xiàn)逐幀動(dòng)畫。

在制作幀動(dòng)畫的時(shí)候，一般采用雪碧圖的方式，通過(guò)切換圖片的位置，使其連續(xù)播放，從而形成動(dòng)畫。

雪碧圖

雪碧圖的制作可以使用compass制作，還可以使用一些小工具進(jìn)行制作，提供一個(gè)在線制作雪碧圖的網(wǎng)站。
CSS Sprites Generator

逐幀動(dòng)畫

我們可以使用css3的keyframes的方式進(jìn)行逐幀動(dòng)畫

.sprite{
    height:78px;
    width:28px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{background-position: 0 0 }
    25%{ background-position:-28px 0;}
    75%{ background-position: -56px 0 }
    100%{ background-position:-84px 0;}
}

如果animation沒(méi)有設(shè)置steps(1,start/end)，動(dòng)畫幀之間將采用默認(rèn)的過(guò)渡方式，此時(shí)觀察到的動(dòng)畫會(huì)變成滑動(dòng)的方式，這不是我們想要的效果。
為此，我們需要使用steps函數(shù)。

steps 
steps(number_of_steps, direction)

steps timing function接受兩個(gè)參數(shù)，steps(n,start/end)，其中n為正整數(shù)，表示分為幾步執(zhí)行完，后一個(gè)參數(shù)是可選的，默認(rèn)為end。

start表示的是一個(gè)左連續(xù)函數(shù)，在每個(gè)間隔的起點(diǎn)就發(fā)生階躍變化，直到該間隔時(shí)間結(jié)束

end表示的是一個(gè)右連續(xù)函數(shù)，在每個(gè)間隔的終點(diǎn)才發(fā)生階躍變化

關(guān)于steps()更多的資料可以查看 How to Use steps() in CSS Animations
對(duì)于人物走動(dòng)的動(dòng)畫，由于是一個(gè)不斷循環(huán)的過(guò)程，所以設(shè)置為start或者end都是可行的。

background-position與translate3d方式的比較

background-position會(huì)引起重繪，而translate3d不會(huì)。（對(duì)于會(huì)引起回流和重繪的屬性可以查看這個(gè)網(wǎng)站 csstriggers，關(guān)于這個(gè)網(wǎng)站的介紹可以查看 這個(gè)回答）
同時(shí)translate3d會(huì)開(kāi)啟GPU渲染加速，性能更好。
綜上所述，translate3d方式較為優(yōu)越。

使用translate3d改造之后的代碼，利用after偽類進(jìn)行背景填充，然后控制該元素移動(dòng)來(lái)實(shí)現(xiàn)逐幀動(dòng)畫。

.sprite{
    overflow:hidden;//設(shè)置超出隱藏
    height:78px;
    width:28px;
}
.sprite:after{
    content:""; //加上content，內(nèi)容才會(huì)顯示
    display:block;
    width:112px ; 
    height:78px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{transform: translate3d(0,0,0)}
    25%{transform: translate3d(-28px,0,0)}
    75%{transform: translate3d(-56px,0,0)}
    100%{transform: translate3d(-84px,0,0)}
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116786.html

相關(guān)文章

  • CSS3動(dòng)畫之逐幀動(dòng)畫

    摘要：什么是逐幀動(dòng)畫要了解逐幀動(dòng)畫，首先要明確什么是逐幀動(dòng)畫。簡(jiǎn)而言之，實(shí)現(xiàn)逐幀動(dòng)畫需要兩個(gè)條件相關(guān)聯(lián)的不同圖像，即動(dòng)畫幀連續(xù)播放。因此在觸屏頁(yè)面中逐幀動(dòng)畫使用廣泛，下文將對(duì)其進(jìn)行詳細(xì)介紹。因此，逐幀動(dòng)畫也被稱為精靈動(dòng)畫。 什么是逐幀動(dòng)畫要了解 CSS3 逐幀動(dòng)畫，首先要明確什么是逐幀動(dòng)畫。 看一下維基百科中的定義： 定格動(dòng)畫，又名逐幀動(dòng)畫，是一種動(dòng)畫技術(shù)，其原理即將每幀不同的圖像連續(xù)播放，...

    RancherLabs 評(píng)論0 收藏0

  • css3中的變形（transform）、過(guò)渡（transition）、動(dòng)畫（animation）屬性

    摘要：中制作動(dòng)畫的幾個(gè)屬性中的變形過(guò)渡動(dòng)畫。默認(rèn)值為，為時(shí)，表示變化是瞬時(shí)的，看不到過(guò)渡效果。實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成通過(guò)類似動(dòng)畫中的幀來(lái)聲明一個(gè)動(dòng)畫在屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。 css3中制作動(dòng)畫的幾個(gè)屬性：css3中的變形（transform）、過(guò)渡（transition）、動(dòng)畫（animation）。 一、 CSS3變形（transform） 語(yǔ)法： transform ： no...

    waruqi 評(píng)論0 收藏0

  • css3 動(dòng)畫（三）animation 簡(jiǎn)介

    摘要：默認(rèn)，只執(zhí)行一次動(dòng)畫動(dòng)畫名稱，該名稱為動(dòng)畫關(guān)鍵幀的名稱。默認(rèn)如何理解表示的是關(guān)鍵幀的名稱，那么如何定義關(guān)鍵幀呢使用。語(yǔ)法名稱關(guān)鍵幀樣式或總結(jié)其實(shí)也并不復(fù)雜，其有個(gè)子屬性。下一篇?jiǎng)赢嬋创a解析通過(guò)閱讀動(dòng)畫庫(kù)的源碼，來(lái)提高對(duì)中屬性的認(rèn)識(shí) 前言 上一篇中，總結(jié)了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動(dòng)畫中的更為靈活的動(dòng)畫屬性：animati...

    itvincent 評(píng)論0 收藏0

  • 入門css3動(dòng)畫

    摘要：入門動(dòng)畫為了讓頁(yè)面體驗(yàn)更為流暢，我們?cè)诟嗟臅r(shí)候都會(huì)采用一些動(dòng)畫給頁(yè)面流程增加一些耦合性動(dòng)畫分為兩類過(guò)渡動(dòng)畫從一個(gè)狀態(tài)變?yōu)榱硪粋€(gè)狀態(tài)一個(gè)寬高都為，鼠標(biāo)移上后變?yōu)閷捀吒鬟@時(shí)候我們就可以用到過(guò)渡動(dòng)畫關(guān)鍵幀動(dòng)畫一個(gè)動(dòng)畫定義多個(gè)關(guān)鍵幀，實(shí)現(xiàn)更為復(fù)雜 入門css3動(dòng)畫 為了讓頁(yè)面體驗(yàn)更為流暢，我們?cè)诟嗟臅r(shí)候都會(huì)采用一些動(dòng)畫給頁(yè)面流程增加一些耦合性 css3動(dòng)畫分為兩類 1. 過(guò)渡動(dòng)畫trans...

    BDEEFE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<