<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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紅包抖動內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

            相關文章

            最新評論

            hao500彩票 www.brillonenbarrois.org:长子县| www.tsctalk.com:阆中市| www.joabiz.com:柳江县| www.363005.com:岑巩县| www.tiantaojiaosu.com:泾源县| www.tea778.com:永福县| www.huangbaodi.com:常宁市| www.michel-berger.net:昭平县| www.kingston-university.net:茂名市| www.jsxzzt.com:双城市| www.mchor.org:大关县| www.tt-kk-ss.com:奉贤区| www.madisonkungfu.com:合阳县| www.theonlynetwork.com:兰考县| www.33335214.com:色达县| www.bobbysidenberg.com:怀远县| www.yumaoziyuan.com:涪陵区| www.trinhtuyetlinh.com:达孜县| www.zbtaocidao.com:尼木县| www.salesqatar.com:绥江县| www.qizhenguo.com:仁布县| www.adonisparadise.com:余庆县| www.3883pj.com:南丰县| www.tjchengdu.com:张家港市| www.bjbthj.com:侯马市| www.n2568.com:吉木萨尔县| www.f3n3.com:白水县| www.beverlysteelasia.com:平阴县| www.yang-xx.com:太保市| www.187296.com:沈丘县| www.trinhtuyetlinh.com:友谊县| www.leopad.net:当阳市| www.yes6688.com:施秉县| www.3dimensions-tv.com:兴安盟| www.oasis-labs.com:南昌县| www.fooool.com:余江县| www.ou-guo.com:广东省| www.guoqq.com:施甸县| www.tammyhomesold.com:延吉市| www.sz-jinxuan.com:永新县| www.awov.org:河曲县| www.implantdentalve.com:梨树县| www.114767.com:陕西省| www.ou-guo.com:子洲县| www.byopi.com:琼海市| www.jb908.com:芮城县| www.yongqinlaw.com:突泉县| www.alarmsunrise.com:阿克| www.jdmdw.com:海南省| www.solace-music.com:晋城| www.alphaaidtraining.com:崇信县| www.digishoppy.com:临澧县| www.miguelduhamel.com:汉沽区| www.bymio.com:延寿县| www.opomart.com:湄潭县| www.mftyd.com:桐梓县| www.bjahwt.com:且末县| www.2009k.com:青铜峡市| www.wwwhg8194.com:江西省| www.sylongview.com:武隆县| www.solar-toys.org:叶城县| www.mark500.com:通海县| www.gamezhuan8.com:湄潭县| www.znfyw.cn:都匀市| www.rkb5.com:汝城县| www.saftlaw.com:钟祥市| www.al-khodair.com:东海县| www.chinaheliang.com:清水县| www.ystsclq.com:化州市| www.52adi.com:宁波市| www.fuwudai.com:永福县| www.ynnpm.com:顺平县| www.tzdqw.com:贺州市| www.jiescience.com:西城区| www.tiekekaiguan.com:宝丰县| www.greenvocational.com:神池县| www.damoa33.com:磐石市| www.godsyw.com:章丘市| www.bulkemailonline.com:长武县| www.alphaaidtraining.com:怀来县| www.aomei1.com:包头市| www.concreteinanyform.com:沈丘县| www.680378.com:横峰县| www.jasmineevanscoach.com:宁晋县|