背景

需求：

H5页面需要一个：点击 “领取红包” 按钮，打开红包有动画效果。。

思路：

一开始，是打算参 css 教程 中 运动的女孩 这个例子，以序列帧的形式完成这个红包动画效果的，需要42张序列图片。被阻止使用这个方法，因为图片太多，请求次数太多，会出现请求很慢的问题。。。所以使用以下的方式实现此需求。

流程:

点击 “领取红包” 按钮，这是一张静态图片
带有“领取红包”字样的图片水平方向旋转2圈，并且图片有模糊效果(毛玻璃效果)

模糊功能的参考链接： https://blog.csdn.net/MiniBlog/article/details/50405713;
抖动效果：图片旋转完成后，有一个抖动效果

抖动效果的参考链接： https://www.cnblogs.com/xiaoliu12/p/6382175.html; https://www.cnblogs.com/xiaoliu12/p/6382175.html;
红包打开效果：由2张图片分别向上和向下飞，同样具有毛玻璃效果；并且同时显示金额的那张图片具有：先放大再缩小的动画
动画完成后，显示金额的静态图片。。这样，一个红包动画特效就实现了。。对于我，我是站在巨人的肩膀上完成这个需求的，因为公司同事在帮我找资料和提供思路 [手动比心]。

html部分

      <!-- 待领取的红包状态图--静态  -->
      <div class="n191106-lucky-pop-wrap unGetLuckyMoneyWrapJs">
          <div class="n191106-lucky-pop-content">
              <div class="n191106-lucky-bg">
                  <a onclick="openLuckyMoney()" href="javaScript:;"  class="n191106-lucky-get-btn unGetLuckyMoneyBtnJs">领取红包</a>
              </div>
              <div class="n191106-lucky-pop-close-wrap">
                  <a href="javaScript:;" class="n191106-lucky-pop-close-btn unGetLuckyMoneyCloseJs">关闭</a>
              </div>
          </div>
      </div>
      <!-- 红包动效 翻转 + 抖动 -->
      <div class="n191106-lucky-pop-wrap luckyMoneyJs" style="display: none;">
          <div class="nLuckyMoneyAnimate nLuckyMoneyAnimate1"></div>
          <div class="n191106-lucky-pop-close-wrap">
          	<a href="javaScript:;" style="height: 0.60rem;display:block;"></a>
          </div>
      </div>
      <!-- 红包动效 打开红包 （上下打开） -->
      <div class="n191106-lucky-pop-wrap openLuckyJs" style="display: none;background:rgba(255,255,255,0)">
          <div class="n191106-lucky-open-bottom openLuckyMoneyDownAnimate"></div>
          <div class="n191106-lucky-open-top openLuckyMoneyUpAnimate"></div>
          <div class="n191106-lucky-pop-close-wrap">
         		<a href="javaScript:;" style="height: 0.60rem;display:block;"></a>
          </div>
      </div>
      <!-- 已领取的红包状态图--静态 -->
      <div class="n191106-lucky-pop-wrap getLuckyScaleAnimateOpcity getLuckyMoneyWrapJs" style="display: none;">
          <div class="n191106-lucky-pop-content">
              <div class="n191106-getLucky-bg getLuckyScaleAnimate">
              	<p class="n191106-getLucky-money">99.99<span class="n191106-getLucky-money-unit">元</span></p>
              	<p class="n191106-getLucky-text"> 99.99 元现金红包</p>
              </div>
              <div class="n191106-lucky-pop-close-wrap">
              	<a href="javaScript:;" class="n191106-lucky-pop-close-btn getLuckyMoneyColseJs">关闭</a>
              </div>
          </div>
      </div>

js部分

      //点击 “领取红包” 按钮
      function openLuckyMoney(){
          document.querySelector('.unGetLuckyMoneyWrapJs').remove(); //移除带有‘点击领取’按钮的图片
          document.querySelector('.luckyMoneyJs').style.display='flex'; //旋转+抖动
          setTimeout(function(){
              document.querySelector('.luckyMoneyJs').remove(); //移除 旋转+抖动 的图
              document.querySelector('.getLuckyMoneyWrapJs').style.display='flex';  //显示 金额 的静态图片
              document.querySelector('.openLuckyJs').style.display='flex'; //打开红包  向上向下飞
          },1000);
          setTimeout(function(){
          	document.querySelector('.openLuckyJs').remove(); //移除 向上向下 飞的图片
          },1800);
      }

css部分

/*红包动效图 start*/
html,body{
    height: 100%;
    overflow: hidden;
}
.n191106-lucky-pop-wrap{
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.2);
    z-index: 9999;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
}
.n191106-lucky-pop-content{
	align-self: center;
	width: 100%;
}
.n191106-lucky-bg{
	width: 5.22rem;
    height: 6.00rem;
    margin: 0 auto;
    background: url(../images/pic_h5_picnic_hongbao@2x.png) center center no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.n191106-lucky-get-btn{
    width: 2.80rem;
    height: 0.94rem;
    display: block;
    background: url(../images/btn_h5_picnic_hongbao_get@2x.png) center center no-repeat;
    background-size: 100% 100%;
    margin: 4.18rem auto 0;
    text-indent: -999rem;	
}
.n191106-lucky-pop-close-wrap{
	overflow: hidden;
    margin: 0.40rem 0;
}
.n191106-lucky-pop-close-btn{
	display: block;
    width: 0.60rem;
    height: 0.60rem;
    border-radius: 50%;
    margin: 0 auto;
    text-indent: -9999rem;
    background: url(../images/btn_h5_pop_close-circle@2x.png) center center no-repeat;
    background-size: 100% 100%;
}
.n191106-getLucky-bg{
	width: 6.52rem;
    height: 8.35rem;
    margin: 0 auto;
    background: url(../images/pic_h5_picnic_share_open@2x.png) center center no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.n191106-getLucky-money{
	color: #F62934;
    font-size: 0.80rem;
    height: 0.90rem;
    line-height: 0.90rem;
    overflow: hidden;
    /* text-indent: 1.60rem; */
    text-align: center;
    margin-top: 1.54rem;
}
.n191106-getLucky-money-unit{
	font-size: 0.34rem;
}
.n191106-getLucky-text{
	color: #FFFFFF;
    font-size: 0.36rem;
    margin-top: 2.96rem;
    text-indent: 1.64rem;
}
/*放大缩小*/
@keyframes getLuckyScaleDraw{
	0%{
        transform: scale(0.8);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.1); /*放大1.1倍*/
    }
    50%{
        transform: scale(1.3);
    }
    75%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.0);
    }
}
@keyframes getLuckyScaleDrawOpcity{
	from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.getLuckyScaleAnimateOpcity{
	-webkit-animation-name: getLuckyScaleDrawOpcity; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
    -webkit-animation-duration: 0.5s; /*动画所花费的时间*/
}
.getLuckyScaleAnimate{
	-webkit-animation-name: getLuckyScaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
    -webkit-animation-duration: 0.5s; /*动画所花费的时间*/
    /* -webkit-animation-delay: 0.2s; 动画所花费的时间 */
}

/*旋转 + 抖动*/
.nLuckyMoneyAnimate{
	width: 5.22rem;
	height: 6.00rem;
	background: url('../images/pic_h5_picnic_hongbao@2x-j.png') center center no-repeat;
	background-size: 100% 100%;
   /*  -webkit-animation: luckyMoneyRun1 1.5s steps(1,end) 1; */   /*序列帧 动画*/
    margin: 0 auto;
    -webkit-animation-name: luckyMoneyRun1; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
    -webkit-animation-duration: 1s; /*动画所花费的时间*/
}

/*旋转 + 抖动*/
@-webkit-keyframes luckyMoneyRun1{
    0%{
    	-webkit-transform:rotateY(360deg);     
    }
    40%{
    	-webkit-transform:rotateY(0deg);  
    	filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(3px);
	 /* Chrome, Opera */
		-moz-filter: blur(3px);
		-ms-filter: blur(3px);
		filter: blur(3px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
    }
   51% {
       -webkit-transform: translate(0px, 0px) rotate(0deg);
       filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(1px);
	 /* Chrome, Opera */
		-moz-filter: blur(1px);
		-ms-filter: blur(1px);
		filter: blur(1px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
   }
   52% {
       -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
   }
   53% {
       -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
   }
   54% {
       -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
   }
   55% {
       -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
   }
   56% {
       -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
   }
   57% {
       -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
   }
   58% {
       -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
   }
   59% {
       -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
   }
   60% {
       -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
   }
   61% {
       -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
   }
   62% {
       -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
   }
   63% {
       -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
   }
   64% {
       -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
   }
   65% {
       -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
   }
   66% {
       -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
   }
   67% {
       -webkit-transform: translate(-1px, 0px) rotate(2deg);
   }
   68% {
       -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
   }
   69% {
       -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
   }
   70% {
       -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
   }
   71% {
       -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
   }
   72% {
       -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
   }
   73% {
       -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
   }
   74% {
       -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
   }
   75% {
       -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
   }
   76% {
       -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
   }
   77% {
       -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
   }
   78% {
       -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
   }
   79% {
       -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
   }
   80% {
       -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
   }
   81% {
       -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
   }
   82% {
       -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
   }
   83% {
       -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
   }
   84% {
       -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
   }
   85% {
       -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
   }
   86% {
       -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
   }
   87% {
       -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
   }
   88% {
       -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
   }
   89% {
       -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
   }
   90% {
       -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
   }
   91% {
       -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
   }
   92% {
       -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
   }
   93% {
       -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
   }
   94 {
       -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
   }
   95% {
       -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
   }
   96% {
       -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
   }
   97% {
       -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
   }
   98% {
       -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
   }
   99% {
       -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
   }
   100% {
       -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
   }
}

.n191106-lucky-open-top{
	width: 5.22rem;
	height: 2.66rem;
	background: url(../images/pic_picnic_hongbao_close_above@2x.png) center center no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: -6.00rem;
}
.n191106-lucky-open-bottom{
	width: 5.22rem;
	height: 6.00rem;
	background: url(../images/pic_picnic_hongbao_close_below@2x.png) center center no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: -2.66rem;
}
.openLuckyMoneyUpAnimate{
	-webkit-animation-name: luckyMoneyRunUp; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
    -webkit-animation-duration: 1s; /*动画所花费的时间*/
}
.openLuckyMoneyDownAnimate{
	-webkit-animation-name: luckyMoneyRunDown; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: 1;  /*动画播放的次数*/
    -webkit-animation-duration: 1s; /*动画所花费的时间*/
}

/*向上飞*/
@-webkit-keyframes luckyMoneyRunUp{
	0%{
		
	}
	10%{
		-webkit-transform: translateY(-2rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(3px);
	 /* Chrome, Opera */
		-moz-filter: blur(3px);
		-ms-filter: blur(3px);
		filter: blur(3px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	20%{
		-webkit-transform: translateY(-5rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(6px);
	 /* Chrome, Opera */
		-moz-filter: blur(6px);
		-ms-filter: blur(6px);
		filter: blur(6px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	30%{
		-webkit-transform: translateY(-10rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(9px);
	 /* Chrome, Opera */
		-moz-filter: blur(9px);
		-ms-filter: blur(9px);
		filter: blur(9px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	40%{
		-webkit-transform: translateY(-20rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(12px);
	 /* Chrome, Opera */
		-moz-filter: blur(12px);
		-ms-filter: blur(12px);
		filter: blur(12px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	50%{
		-webkit-transform: translateY(-30rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(15px);
	 /* Chrome, Opera */
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	60%{
		-webkit-transform: translateY(-40rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(18px);
	 /* Chrome, Opera */
		-moz-filter: blur(18px);
		-ms-filter: blur(18px);
		filter: blur(18px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	70%{
		-webkit-transform: translateY(-50rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(21px);
	 /* Chrome, Opera */
		-moz-filter: blur(21px);
		-ms-filter: blur(21px);
		filter: blur(21px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	80%{
		-webkit-transform: translateY(-80rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(21px);
	 /* Chrome, Opera */
		-moz-filter: blur(21px);
		-ms-filter: blur(21px);
		filter: blur(21px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	90%{
		-webkit-transform: translateY(-200rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(24px);
	 /* Chrome, Opera */
		-moz-filter: blur(24px);
		-ms-filter: blur(24px);
		filter: blur(24px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
	100%{
		-webkit-transform: translateY(-1000rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(27px);
	 /* Chrome, Opera */
		-moz-filter: blur(27px);
		-ms-filter: blur(27px);
		filter: blur(27px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */
	}
}

/*向下飞*/
@-webkit-keyframes luckyMoneyRunDown{
	0%{
	
	}
	10%{
		-webkit-transform: translateY(1rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(3px);
	 /* Chrome, Opera */
		-moz-filter: blur(3px);
		-ms-filter: blur(3px);
		filter: blur(3px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	20%{
		-webkit-transform: translateY(5rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(6px);
	 /* Chrome, Opera */
		-moz-filter: blur(6px);
		-ms-filter: blur(6px);
		filter: blur(6px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	30%{
		-webkit-transform: translateY(10rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(9px);
	 /* Chrome, Opera */
		-moz-filter: blur(9px);
		-ms-filter: blur(9px);
		filter: blur(9px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	40%{
		-webkit-transform: translateY(40rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(12px);
	 /* Chrome, Opera */
		-moz-filter: blur(12px);
		-ms-filter: blur(12px);
		filter: blur(12px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	50%{
		-webkit-transform: translateY(50rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(15px);
	 /* Chrome, Opera */
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	60%{
		-webkit-transform: translateY(60rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(18px);
	 /* Chrome, Opera */
		-moz-filter: blur(18px);
		-ms-filter: blur(18px);
		filter: blur(18px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}	
	70%{
		-webkit-transform: translateY(70rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(21px);
	 /* Chrome, Opera */
		-moz-filter: blur(21px);
		-ms-filter: blur(21px);
		filter: blur(3px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	80%{
		-webkit-transform: translateY(80rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(24px);
	 /* Chrome, Opera */
		-moz-filter: blur(24px);
		-ms-filter: blur(24px);
		filter: blur(24px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	90%{
		-webkit-transform: translateY(90rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(27px);
	 /* Chrome, Opera */
		-moz-filter: blur(27px);
		-ms-filter: blur(27px);
		filter: blur(27px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
	100%{
		-webkit-transform: translateY(100rem);
		filter: url(blur.svg#blur);
	 /* FireFox, Chrome, Opera */
		-webkit-filter: blur(30px);
	 /* Chrome, Opera */
		-moz-filter: blur(30px);
		-ms-filter: blur(30px);
		filter: blur(30px);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
	 /* IE6~IE9 */	
	}
}
/*红包动效图 end*/

感谢您点开此文，若有更好的方式，欢迎共享，共同进步哈。谢谢！