背景
需求:
H5页面需要一个:点击 “领取红包” 按钮,打开红包有动画效果。。
思路:
一开始,是打算参 css 教程 中 运动的女孩 这个例子,以序列帧的形式完成这个红包动画效果的,需要42张序列图片。被阻止使用这个方法,因为图片太多,请求次数太多,会出现请求很慢的问题。。。所以使用以下的方式实现此需求。
流程:
-
点击 “领取红包” 按钮,这是一张静态图片
-
带有“领取红包”字样的图片水平方向旋转2圈,并且图片有模糊效果(毛玻璃效果)
模糊功能的参考链接: blog.csdn.net/MiniBlog/ar…
-
抖动效果:图片旋转完成后,有一个抖动效果
抖动效果的参考链接: www.cnblogs.com/xiaoliu12/p… www.cnblogs.com/xiaoliu12/p…
-
红包打开效果:由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*/
感谢您点开此文,若有更好的方式,欢迎共享,共同进步哈。谢谢!