js实现红包雨案例,如何使用js实现红包雨
快到双11了,每到双11购物节,可以看到浏览器有红包雨特效,以下是一个简单实现红包雨特效的方法,供大家参考。效果演示:代码实现说明:附件demo下载:https://github.com/jyblogs/hongbao1、前端html代码
红包雨
2、js代码$(function(){
varNUMBER_OF_LEAVES=50;
/*
Calledwhenthe"FallingLeaves"pageiscompletelyloaded.
*/
functioninit(){
/*Getareferencetotheelementthatwillcontaintheleaves*/
varcontainer=document.getElementById('petalbox');
/*Filltheemptycontainerwithnewleaves*/
try{
for(vari=0;
idiv>img{
position:absolute;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function:linear;
-webkit-backface-visibility:hidden;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-timing-function:linear;
backface-visibility:hidden;
}
@-webkit-keyframesfade{
0%,90%{
opacity:1;
}
100%{
opacity:0;
}
}
@keyframesfade{
0%,90%{
opacity:1;
}
100%{
opacity:0;
}
}
@-webkit-keyframesdrop{
0%{
-webkit-transform:translate3d(0,0,0);
}
100%{
-webkit-transform:translate3d(0,1100px,0);
}
}
@keyframesdrop{
0%{
transform:translate3d(0,0,0);
}
100%{
transform:translate3d(0,1100px,0);
}
}
@-webkit-keyframesdrop-left{
0%{
-webkit-transform:translate3d(0,0,0);
}
100%{
-webkit-transform:translate3d(-500px,1100px,0);
}
}
@keyframesdrop-left{
0%{
transform:translate3d(0,0,0);
}
100%{
transform:translate3d(-500px,1100px,0);
}
}
@-webkit-keyframesdrop-right{
0%{
-webkit-transform:translate3d(0,0,0);
}
100%{
-webkit-transform:translate3d(500px,1100px,0);
}
}
@keyframesdrop-right{
0%{
transform:translate3d(0,0,0);
}
100%{
transform:translate3d(500px,1100px,0);
}
}
@-webkit-keyframesclockwiseSpin{
0%{
-webkit-transform:none;
}
100%{
-webkit-transform:rotate(480deg);
}
}
@keyframesclockwiseSpin{
0%{
transform:none;
}
100%{
transform:rotate(480deg);
}
}
@-webkit-keyframescounterclockwiseSpinAndFlip{
0%{
-webkit-transform:none;
}
100%{
-webkit-transform:rotate(-480deg);
}
}
}
@keyframescounterclockwiseSpinAndFlip{
0%{
transform:none;
}
100%{
transform:rotate(-480deg);
}
}
/*animation*/
.timenav.time_list.time1{
-webkit-animation:lantern_shake16slinearboth;
-webkit-transform-origin:centertop;
animation:lantern_shake16slinearboth;
transform-origin:centertop;
}
@-webkit-keyframeslantern_shake1{
0%,50%{
-webkit-transform:none;
}
25%{
-webkit-transform:rotate(-4deg);
}
75%{
-webkit-transform:rotate(4deg);
}
}
@keyframeslantern_shake1{
0%,50%{
transform:none;
}
25%{
transform:rotate(-4deg);
}
75%{
transform:rotate(4deg);
}
}
.timenav.time_list.time2{
-webkit-animation:lantern_shake26slinearboth;
-webkit-transform-origin:centertop;
-webkit-backface-visibility:hidden;
animation:lantern_shake26slinearboth;
transform-origin:centertop;
}
@-webkit-keyframeslantern_shake2{
0%,50%{
-webkit-transform:none;
}
25%{
-webkit-transform:rotate(-6deg)translate3d(5px,0,0);
}
75%{
-webkit-transform:rotate(6deg)translate3d(-5px,0,0);
}
}
@keyframeslantern_shake2{
0%,50%{
transform:none;
}
25%{
transform:rotate(-6deg)translate3d(5px,0,0);
}
75%{
transform:rotate(6deg)translate3d(-5px,0,0);
}
}
.timenav.time_list.time3{
-webkit-animation:lantern_shake36slinearboth;
-webkit-transform-origin:centertop;
-webkit-backface-visibility:hidden;
animation:lantern_shake36slinearboth;
transform-origin:centertop;
}
@-webkit-keyframeslantern_shake3{
0%,50%{
-webkit-transform:none;
}
25%{
-webkit-transform:rotate(-8deg)translate3d(14px,0,0);
}
75%{
-webkit-transform:rotate(8deg)translate3d(-14px,0,0);
}
}
@keyframeslantern_shake3{
0%,50%{
transform:none;
}
25%{
transform:rotate(-8deg)translate3d(14px,0,0);
}
75%{
transform:rotate(8deg)translate3d(-14px,0,0);
}
}
.timenav.time_list:hovera{
-webkit-animation:none;
animation:none;
}
.banner_tit,.banner_subtit{
-webkit-animation:bounceInDown0.8sboth;
animation:bounceInDown0.8sboth;
}
.banner_subtit{
-webkit-animation-delay:0.4s;
animation-delay:0.4s;
}
@-webkit-keyframesbounceInDown{
from,60%,75%,90%,to{
-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
}
0%{
opacity:0;
-webkit-transform:translate3d(0,-3000px,0);
}
60%{
-webkit-transform:translate3d(0,25px,0);
}
75%{
-webkit-transform:translate3d(0,-10px,0);
}
90%{
-webkit-transform:translate3d(0,5px,0);
}
to{
-webkit-transform:none;
opacity:1;
}
}
@keyframesbounceInDown{
from,60%,75%,90%,to{
animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);
}
0%{
opacity:0;
transform:translate3d(0,-3000px,0);
}
60%{
transform:translate3d(0,25px,0);
}
75%{
transform:translate3d(0,-10px,0);
}
90%{
transform:translate3d(0,5px,0);
}
to{
transform:none;
opacity:1;
}
}
.banner_time{
-webkit-animation:fadeIn1s1.2sboth;
animation:fadeIn1s1.2sboth;
}
@-webkit-keyframesfadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
@keyframesfadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
.fireworksi{
-webkit-animation:fireworkani1.6s.2seaseboth;
-webkit-animation-iteration-count:2;
animation:fireworkani1.6s.2seaseboth;
animation-iteration-count:2;
}
.fireworks.f2{
-webkit-animation-delay:.6s;
animation-delay:.6s;
}
.fireworks.f3{
-webkit-animation-delay:.6s;
animation-delay:.6s;
}
.fireworks.f4{
-webkit-animation-delay:.8s;
animation-delay:.8s;
}
@-webkit-keyframesfireworkani{
0%,9%{
-webkit-transform:scale(.1);
opacity:0;
}
10%{
-webkit-transform:scale(.1);
opacity:1;
}
95%{
-webkit-transform:scale(1.5);
opacity:.1;
}
100%{
-webkit-transform:scale(1.5);
opacity:0;
}
}
@keyframesfireworkani{
0%,9%{
transform:scale(.1);
opacity:0;
}
10%{
transform:scale(.1);
opacity:1;
}
95%{
transform:scale(1.5);
opacity:.1;
}
100%{
transform:scale(1.5);
opacity:0;
}
}
.main_before,.main_after,.main_cont{
-webkit-animation:contfadein1s.5sboth;
animation:contfadein1s.5sboth;
}
@-webkit-keyframescontfadein{
0%{
-webkit-transform:translate3d(0,100px,0);
opacity:0;
}
100%{
-webkit-transform:none;
opacity:1;
}
}
@keyframescontfadein{
0%{
transform:translate3d(0,100px,0);
opacity:0;
}
100%{
transform:none;
opacity:1;
}
}
/*media*/
/*.small_window.timenav{
left:20px;
margin-left:0;
}*/以上是个简单案例,点击后展示结果可以结合实际情况进行更改。