background
Requirements:
H5 page needs a: click “get red envelope” button, open the red envelope has animation effect.
Ideas:
At the beginning, I was going to use the example of the girl in motion in the CSS tutorial to complete the red envelope animation effect in the form of sequence frames, requiring 42 sequence images. Blocked from using this method due to too many images and too many requests, resulting in slow requests… So implement this requirement in the following way.
Process:
-
Click “get red envelope” button, this is a still picture
-
The picture with the words “get red envelope” rotates horizontally 2 times, and the picture has a blurred effect (frosted glass effect)
Fuzzy function reference links: blog.csdn.net/MiniBlog/ar…
-
Dither effect: After the image is rotated, there is a dither effect
Judder reference links: www.cnblogs.com/xiaoliu12/p… www.cnblogs.com/xiaoliu12/p…
-
Red envelope opening effect: fly up and down from 2 pictures respectively, also with frosted glass effect; And the picture that shows the amount at the same time has: zooming in and out animation
-
After the animation is complete, display a still picture of the amount. In this way, a red envelope animation effect is realized. For me, I am standing on the shoulders of giants to fulfill this requirement, because my colleagues in the company are helping me find materials and provide ideas [manual comparison].
HTML part
<! Static --> <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"> Close </a> </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.60 rem. display:block;"></a> </div> </div> <! --> <div class="n191106-lucky-pop-wrap openLuckyJs" style="display: none; Background: rgba (255255255, 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.60 rem. display:block;"></a> </div> </div> <! Static --> <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"< span class = > 99.99"n191106-getLucky-money-unit"> meta </span></p> <p class="n191106-getLucky-text"</p> </div> <div class="n191106-lucky-pop-close-wrap">
<a href="javaScript:;" class="n191106-lucky-pop-close-btn getLuckyMoneyColseJs"</a> </div> </div>Copy the codeJs part
// Click the "get a red envelope" buttonfunction openLuckyMoney(){
document.querySelector('.unGetLuckyMoneyWrapJs').remove(); // Remove image document.querySelector('.luckyMoneyJs').style.display='flex'; // Rotate + jittersetTimeout(function(){
document.querySelector('.luckyMoneyJs').remove(); // Remove rotation + jitter graph document.querySelector('.getLuckyMoneyWrapJs').style.display='flex'; Document.queryselector ('.openLuckyJs').style.display='flex'; // Open the red envelope and fly up and down},1000);setTimeout(function(){
document.querySelector('.openLuckyJs').remove(); },1800); }Copy the codeThe CSS part
/* 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, 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.22 rem; Height: 6.00 rem; margin: 0 auto; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; overflow: hidden; }. N191106 - lucky - get - BTN {width: 2.80 rem; Height: 0.94 rem; display: block; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; Margin: 4.18 rem auto 0; text-indent: -999rem; } .n191106-lucky-pop-close-wrap{ overflow: hidden; Margin: 0.40 rem 0; } .n191106-lucky-pop-close-btn{ display: block; Width: 0.60 rem; Height: 0.60 rem; border-radius: 50%; margin: 0 auto; text-indent: -9999rem; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; }. N191106 getLucky - bg {width: 6.52 rem; Height: 8.35 rem; margin: 0 auto; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; overflow: hidden; } .n191106-getLucky-money{ color:#F62934;The font - size: 0.80 rem; Height: 0.90 rem; The line - height: 0.90 rem; overflow: hidden; / * text text-indent: 1.60 rem; */ text-align: center; Margin - top: 1.54 rem; }. N191106 - getLucky - money - unit {the font - size: 0.34 rem; } .n191106-getLucky-text{ color:#FFFFFF;The font - size: 0.36 rem; Margin - top: 2.96 rem; The text text-indent: 1.64 rem; } /* Zoom in */ @keyframes getLuckyScaleDraw{0%{transform: scale(0.8); /* Start with original size */} 25%{transform: scale(1.1); Transform: scale(1.3); transform: scale(1.3); 75%} {the transform: scale (1.1); 100%} {the transform: scale (1.0); } } @keyframes getLuckyScaleDrawOpcity{ from{ opacity: 0; } to{ opacity: 1; } } .getLuckyScaleAnimateOpcity{ -webkit-animation-name: getLuckyScaleDrawOpcity; -webkit-animation-timing-function: ease-in-out; /* Animation speed curve */ -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; }. GetLuckyScaleAnimate {-webkit-animation-name: getLuckyScaleDraw; -webkit-animation-timing-function: ease-in-out; /* Animation speed curve */ -webkit-animation-iteration-count: 1; -webkit-animation-duration: 0.5s; / /* -webkit-animation-delay: 0.2s; NLuckyMoneyAnimate {width: 5.22rem; Height: 6.00 rem; background: url('.. /images/[email protected]') 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; /* Animation speed curve */ -webkit-animation-iteration-count: 1; /* The number of times the animation is played */ -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); /* webkit-transform: translate(-1px, 1.5px) rotate(1.5deg); /* webkit-transform: translate(-1px, 1.5px) rotate(1.5deg); } 53 {-webkit-transform: translate(1.px, 0px) rotate(-0.5deg); {-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg); {-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg); } 56 {-webkit-transform: translate(1.4px, 0px) rotate(-2deg); {-webkit-transform: translate(-1.3px, -1px) rotate(-2deg); } 58 {-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg); {-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); } 60 {-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg); {-webkit-transform: translate(1px, 1px) rotate(-0.5deg); {-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg); {-webkit-transform: translate(-1.4px, -1px) rotate(2deg); {-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg); {-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg); {-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg); } 67% { -webkit-transform: translate(-1px, 0px) rotate(2deg); {-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg); {-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg); {-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg); {-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg); {-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg); {-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg); {-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg); {-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); {-webkit-transform: translate(1.6px, -1px) rotate(-2deg); {-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg); } 80 {-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg); {-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg); {-webkit-transform: translate(0px, 0px) rotate(-1.5deg); {-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); {-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); {-webkit-transform: translate(-1px, 1.4px) rotate(2deg); } 91 {-webkit-transform: translate(1.4px, 1.6px) rotate(2deg); {-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg); } 93 {-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg); } 0 {-webkit-transform: translate(1px, 1.4px) rotate(-2deg); 0 {-webkit-transform: translate(1px, 1.4px) rotate(-2deg); {-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg); {-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); {-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg); {-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); } 99 {-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg); {-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg); }}. N191106-lucky-open-top {width: 5.22rem; Height: 2.66 rem; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; margin: 0 auto; Margin - top: 6.00 rem. {}. N191106 - lucky - open - bottom width: 5.22 rem; Height: 6.00 rem; background: url(.. /images/[email protected]) center center no-repeat; background-size: 100% 100%; margin: 0 auto; Margin - top: 2.66 rem. } .openLuckyMoneyUpAnimate{ -webkit-animation-name: luckyMoneyRunUp; -webkit-animation-timing-function: ease-in-out; /* Animation speed curve */ -webkit-animation-iteration-count: 1; /* The number of times the animation is played */ -webkit-animation-duration: 1s; The time it takes to * / / * animation}. OpenLuckyMoneyDownAnimate {- its - animation - name: luckyMoneyRunDown; -webkit-animation-timing-function: ease-in-out; /* Animation speed curve */ -webkit-animation-iteration-count: 1; /* The number of times the animation is played */ -webkit-animation-duration: 1s; / / @-webkit-keyframes luckyMoneyRunUp{0%{} 10%{-webkit-transform: translateY(-2rem); / / 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); / / @-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 */Copy the codeThank you for clicking on this article, if there is a better way, welcome to share, common progress ha. Thank you very much!