<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.desaisartstudio.com:旬邑县| www.play-nike.com:海安县| www.tv680.com:宜良县| www.bkentertainments.com:呼伦贝尔市| www.vintage-denim.com:邓州市| www.9e-9e.com:富锦市| www.cp6783.com:都江堰市| www.xpresspropane2u.com:曲靖市| www.themufflerhouse.com:咸阳市| www.n7989.com:乌拉特后旗| www.supernakliye.com:万源市| www.e2aa.com:秦安县| www.carecnn.com:大同市| www.7654666.com:宁国市| www.bilellotraslochi.com:永寿县| www.shunda-steel.com:沾化县| www.autocrz.com:溆浦县| www.xybww.cn:宁化县| www.bljrsizuhs.com:宣城市| www.bwenquan.com:枞阳县| www.blackgayamerica.com:修武县| www.zhengyuxiangsu.com:湖北省| www.appliancechina.com:新郑市| www.donyahost.com:卓资县| www.biosourcepharm.com:依安县| www.gxsgx.com:毕节市| www.pulaumandeh.com:黔西县| www.baikalwaves.com:池州市| www.g3553.com:从江县| www.flamwoodvideo.com:洪湖市| www.borealmatters.org:馆陶县| www.iflix32.com:九江县| www.bar-dendo.com:通海县| www.wingsofsong.org:南康市| www.hg81789.com:修文县| www.shihuotoys.com:左权县| www.uu-i.com:鸡西市| www.obatviagraasli.com:灵山县| www.brianpuspos.com:和田县| www.sqbaijiu.com:高平市| www.flying-nerd.com:鱼台县| www.nanopowerindia.com:嵩明县| www.asscing.com:苍梧县| www.msmicrosoft.com:威海市| www.xnxqw.cn:昌邑市| www.tms16.com:衡东县| www.majohairbraiding.com:炎陵县| www.jiescience.com:和平区| www.goodnewsbro.com:德钦县| www.rh5x.com:丰顺县| www.gbdbn.cn:军事| www.senimarmer.com:名山县| www.lomachihuahuas.com:舒兰市| www.usuariointernet.net:陆川县| www.wrenandlark.net:临城县| www.sillasdecomedor.org:蕲春县| www.emedicalweb.com:平远县| www.sincerely-0501.com:迁西县| www.asrgame.com:井陉县| www.burkholderpaving.com:阿城市| www.udestudio.com:宁波市| www.huthug.com:青阳县| www.kn599.com:汪清县| www.yuexiangshipin.com:响水县| www.sharebearapp.com:安吉县| www.taipeisailing.org:漯河市| www.hougangopenmri.com:进贤县| www.lumicphoto.com:辉南县| www.zyfoodmachine.com:津南区| www.jiaxinleather.com:香港| www.v3r7.com:珲春市| www.foxbreaks.com:广河县| www.rippan.com:建湖县| www.masjixie.com:新和县| www.rh2010.com:光泽县| www.iptb.org:桑植县| www.nawalodge.com:荥经县| www.cp9220.com:北辰区| www.mypopularbrand.com:临安市| www.clayris.com:泰宁县| www.p5539.com:青川县| www.toto-ya.com:乌苏市| www.my-crusher.com:苏尼特左旗| www.cheapcialisnow.net:景德镇市|