CSS3實(shí)現(xiàn)紅包抖動(dòng)效果
發(fā)布時(shí)間：2020-12-23 14:52:24 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3實(shí)現(xiàn)紅包抖動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
有個(gè)需求是要實(shí)現(xiàn)紅包的抖動(dòng)效果，之前沒做過，記錄一下嘻嘻~~
這里用到了transform: rotate()屬性，加上animation實(shí)現(xiàn)動(dòng)畫效果，不多說上代碼
.red_packet {
width: 180rpx;
height: 220rpx;
position: fixed;
top: 10rpx;
right: 20rpx;
color: #D60E19;
animation: shake .5s linear infinite;
}
@keyframes shake {
25% {
transform: rotate(7deg);
}
75% {
transform: rotate(-7deg);
}
50%,
100% {
transform: rotate(0);
}
}
開始實(shí)現(xiàn)的效果是這樣式的
一直在左右擺動(dòng)，但要實(shí)現(xiàn)的效果是隔幾秒抖兩下，animation不支持間隔時(shí)間動(dòng)畫怎么辦呢？百度了一番，可以通過設(shè)置百分比，前三秒不動(dòng)，從70%的時(shí)候開始抖動(dòng)，而且要快準(zhǔn)狠，改良了一番，效果如下：
.red_packet {
width: 180rpx;
height: 220rpx;
position: fixed;
top: 10rpx;
right: 20rpx;
color: #D60E19;
animation: shake 3s linear infinite;
}
@keyframes shake {
70%, 80% {
transform: rotate(7deg);
}
75% {
transform: rotate(-7deg);
}
65%,
85% {
transform: rotate(0);
}
}
到此這篇關(guān)于CSS3實(shí)現(xiàn)紅包抖動(dòng)效果的文章就介紹到這了,更多相關(guān)CSS3紅包抖動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了css3 transform過渡抖動(dòng)問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-23
- 這篇文章主要介紹了css3動(dòng)畫效果抖動(dòng)解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-03
CSS 控制Html頁面高度導(dǎo)致抖動(dòng)問題的原因
CSS 控制Html頁面高度導(dǎo)致抖動(dòng)，這類由高度導(dǎo)致頁面抖動(dòng)的問題，其實(shí)究其根本原因是滾動(dòng)條是否顯示導(dǎo)致的2014-08-11
CSS3新浪微博模板商店鼠標(biāo)懸停圖片抖動(dòng)特效
一款鼠標(biāo)懸停在圖片上，圖片搖晃抖動(dòng)的CSS3特效代碼2014-03-06css3讓div隨鼠標(biāo)移動(dòng)而抖動(dòng)起來
一些背景圖片隨著鼠標(biāo)的移動(dòng)的反向的移動(dòng)，感覺跟不錯(cuò)，下面為大家介紹喜愛使用css3讓div隨鼠標(biāo)移動(dòng)而抖動(dòng)起來，感興趣的朋友可以參考下2014-02-10CSS 控制因Html頁面高度導(dǎo)致抖動(dòng)的問題解決方法
由高度導(dǎo)致頁面抖動(dòng)的問題，其實(shí)究其根本原因是滾動(dòng)條是否顯示導(dǎo)致的，具體解決方法如下，有類似情況的朋友可以參考下，希望對(duì)大家有所幫助2013-08-23
