CSS3 實(shí)現(xiàn)多個(gè)動(dòng)畫(huà)效果

since1986 發(fā)布于2019-08-29 13:22 / 2776人閱讀

摘要：利用實(shí)現(xiàn)動(dòng)畫(huà)效果內(nèi)容皮球掉地上反彈起來(lái)純實(shí)現(xiàn)效果圖片移動(dòng)實(shí)現(xiàn)打字輸入效果效果更多點(diǎn)我看效果博客放在上了，歡迎大家，我會(huì)持續(xù)更新一些效果。

利用 CSS3 實(shí)現(xiàn)動(dòng)畫(huà)效果

內(nèi)容

皮球掉地上反彈起來(lái)

純 CSS 實(shí)現(xiàn) gif 效果

圖片移動(dòng)

實(shí)現(xiàn)打字輸入效果

效果

// html



//css

@keyframes bounce {
60%, 80%, to {
  transform: translateY(400px); 
  animation-timing-function: ease;        
  }        
  70% { transform: translateY(300px); }        
  90% { transform: translateY(360px); }
}

.ball {
    width: 50px;        
    height: 50px;        
    border-radius: 50%;
    margin: auto;        
    background: rgba(0,100,100,0.5);        
    animation: bounce 2s cubic-bezier(.58,.13,.94,.64) forwards;
}

更多點(diǎn)我看效果 github

博客放在 github 上了，歡迎大家 star or fork，我會(huì)持續(xù)更新 CSS 一些效果。

云服務(wù)器 GPU云服務(wù)器 css3動(dòng)畫(huà) 高性能css3動(dòng)畫(huà) 浮動(dòng)效果動(dòng)畫(huà) 翻轉(zhuǎn)動(dòng)畫(huà)效果

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112555.html

相關(guān)文章

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

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

waruqi 2019-08-30 10:51 評(píng)論0 收藏0
CSS3 新特性

摘要：語(yǔ)法說(shuō)明對(duì)象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴(kuò)展半徑陰影顏色內(nèi)陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設(shè)置取值陰影類(lèi)型此參數(shù)可選。 CSS3 是最新的 CSS 標(biāo)準(zhǔn)，并且完全向后兼容，不過(guò)目前W3C 仍然在對(duì) CSS3 規(guī)范進(jìn)行開(kāi)發(fā)，雖然標(biāo)準(zhǔn)的規(guī)范還沒(méi)有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 評(píng)論0 收藏0
前端動(dòng)畫(huà)調(diào)研-V1

摘要：支持動(dòng)畫(huà)狀態(tài)的，在動(dòng)畫(huà)開(kāi)始，執(zhí)行中，結(jié)束時(shí)提供回調(diào)函數(shù)支持動(dòng)畫(huà)可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設(shè)置動(dòng)畫(huà)倉(cāng)庫(kù)文檔演示功能介紹一定程度上，也是一個(gè)動(dòng)畫(huà)庫(kù)，適用所有的屬性，并且實(shí)現(xiàn)的能更方便的實(shí)現(xiàn)幀動(dòng)畫(huà)，替代復(fù)雜的定義方式。動(dòng)畫(huà)調(diào)研-V1 前言：動(dòng)畫(huà)從用途上可以分為兩種，一種是展示型的動(dòng)畫(huà)，類(lèi)似于一張GIF圖，或者一段視頻，另一種就是交互性的動(dòng)畫(huà)。這兩種都有具體的應(yīng)用場(chǎng)景，比如...

ddongjian0000 2019-08-23 11:00 評(píng)論0 收藏0
css3動(dòng)畫(huà)屬性詳解之transform、transition、animation

摘要：動(dòng)畫(huà)屬性詳解關(guān)于制作動(dòng)畫(huà)的幾個(gè)屬性變形轉(zhuǎn)換和動(dòng)畫(huà)。一屬性旋轉(zhuǎn)中心為原點(diǎn)扭曲傾斜縮放移動(dòng)矩陣變形。各個(gè)屬性的用法旋轉(zhuǎn)其中表示度。承載動(dòng)畫(huà)的另一個(gè)屬性。定義動(dòng)畫(huà)的名稱(chēng)。一個(gè)或多個(gè)合法的樣式屬性。 css3動(dòng)畫(huà)屬性詳解：關(guān)于CSS3制作動(dòng)畫(huà)的幾個(gè)屬性：變形(transform)、轉(zhuǎn)換(transition)和動(dòng)畫(huà)(animation)。一、transform 屬性：旋轉(zhuǎn)rotate（中...

Riddler 2019-08-30 12:46 評(píng)論0 收藏0
CSS3動(dòng)畫(huà)之逐幀動(dòng)畫(huà)

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

RancherLabs 2019-08-30 15:43 評(píng)論0 收藏0