亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3實(shí)現(xiàn)紅包抖動(dòng)效果

  發(fā)布時(shí)間：2020-12-23 14:52:24   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS3實(shí)現(xiàn)紅包抖動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

有個(gè)需求是要實(shí)現(xiàn)紅包的抖動(dòng)效果，之前沒(méi)做過(guò)，記錄一下嘻嘻~~
這里用到了transform: rotate()屬性，加上animation實(shí)現(xiàn)動(dòng)畫(huà)效果，不多說(shuō)上代碼

.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);
  }
}

開(kāi)始實(shí)現(xiàn)的效果是這樣式的

一直在左右擺動(dòng)，但要實(shí)現(xiàn)的效果是隔幾秒抖兩下，animation不支持間隔時(shí)間動(dòng)畫(huà)怎么辦呢？百度了一番，可以通過(guò)設(shè)置百分比，前三秒不動(dòng)，從70%的時(shí)候開(kāi)始抖動(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)文章

最新評(píng)論