<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. CSS3實現紅包抖動效果

        發布時間:2020-12-23 14:52:24   作者:佚名   我要評論
      這篇文章主要介紹了CSS3實現紅包抖動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

      有個需求是要實現紅包的抖動效果,之前沒做過,記錄一下嘻嘻~~
      這里用到了transform: rotate()屬性,加上animation實現動畫效果,不多說上代碼

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

      開始實現的效果是這樣式的

      一直在左右擺動,但要實現的效果是隔幾秒抖兩下,animation不支持間隔時間動畫怎么辦呢?百度了一番,可以通過設置百分比,前三秒不動,從70%的時候開始抖動,而且要快準狠,改良了一番,效果如下:

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

      到此這篇關于CSS3實現紅包抖動效果的文章就介紹到這了,更多相關CSS3紅包抖動內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      最新評論

      218彩票 www.bentleybeacher.com:湟源县| www.thechamplife.com:栾川县| www.amb-eco.com:镇雄县| www.cp3669.com:琼海市| www.zuluanimazione.com:毕节市| www.kma209.com:新和县| www.missionsweb.net:稷山县| www.cldmart.com:景东| www.orodfish.com:永善县| www.smithbmw.com:灯塔市| www.kma209.com:秦安县| www.wwwxfplay.com:华蓥市| www.escenamobile.com:平原县| www.gxcjg.com:化德县| www.ashvieducation.com:保亭| www.mfkxn.com:荆州市| www.massage-prague.net:三原县| www.czzhanhai.com:迁安市| www.sparroboter.com:建阳市| www.tjxfjzgc.com:东乌珠穆沁旗| www.thedoveexperience.com:衡南县| www.ly201.com:四子王旗| www.wainini.com:通海县| www.tv680.com:罗平县| www.offreznouslolympia.com:永和县| www.m2992.com:项城市| www.viralcoins.com:金沙县| www.ynsh9188.com:万荣县| www.cp3669.com:乐陵市| www.moto-journal.com:开封县| www.tjgcwy.com:菏泽市| www.baochimc.com:乌鲁木齐县| www.farukfunclub.com:独山县| www.deeblick.com:寿阳县| www.tjznml.com:孝昌县| www.tuestate.com:莎车县| www.jiphoton-inc.com:嵊泗县| www.kd933.com:宁德市| www.283312.com:盐边县| www.edunestinstitute.com:普陀区| www.bicaraperpustakaan.com:武陟县| www.webz-international.com:南岸区| www.02art.com:商水县| www.tonivlee.com:梅州市| www.nwpglobal.com:南陵县| www.cooperspeed.com:长治市| www.aaotimepasskarain.com:伊川县| www.myserverfortest.com:福建省| www.mmairan.com:读书| www.hg68345.com:于田县| www.090577.com:吕梁市| www.www8711msc.com:嘉黎县| www.yklblm.com:巴林右旗| www.zzjinbowei.com:嫩江县| www.guoyunfei.com:湄潭县| www.hg84678.com:淮北市| www.els668.com:临高县| www.gfcf14greendream.com:阿克苏市| www.fuzhuang1717.com:富阳市| www.mashrou3ak.org:安仁县| www.ctspecialistsllc.com:平顺县| www.anjiescl.com:南开区| www.totoadmin.com:永嘉县| www.mei-le-jia.com:鞍山市| www.cbrpw.cn:台东县| www.cp1696.com:保亭| www.mitnickroddierhicks.com:台北县| www.mathtuition.org:水富县| www.digishoppy.com:许昌县| www.lxglc.cn:苗栗市| www.z5989.com:舞阳县| www.tosarang.org:沛县| www.hongkongpartybus.com:黄陵县| www.liyingbaobei.com:永城市| www.982610.com:宁强县| www.jp-daigo.com:秭归县| www.sterlingsilvergifts.com:象山县| www.caboverdedesign.com:华阴市| www.sableridgevillage.com:阿拉善左旗| www.774002.com:邯郸县| www.americanbeautiesnationalpageants.com:泽州县| www.thedoveexperience.com:阿巴嘎旗| www.378dan.com:安岳县| www.gbdbn.cn:信阳市|