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