css按钮点击放烟花,纯CSS实现放烟花效果

.fireWorkBox{content:'';width:10upx;height:10upx;display:inline-block;// box-shadow:10upx 0upx 0 #FF00FF,

// 40upx -30upx 0 #FF7F50, 70upx -10upx 0 #00FFFF, 130upx -20upx 0 #9932CC, 230upx 0 0 #00FFFF,

// 80upx -70upx 0 #00FF00,100upx -40upx 0 #FF00FF, 190upx -30upx 0 #FF00FF,

// 130upx -110upx 0 #FF00FF,150upx -60upx 0 #ADFF2F,

// 200upx -80upx 0 #00FFFF,

// 250upx -30upx 0 #FF7F50,

// 280upx 20upx 0 #FF00FF,

// -10upx 0upx 0 #FF00FF,

// -40upx -30upx 0 #FF7F50, -70upx -10upx 0 #00FFFF,-130upx -20upx 0 #9932CC, -230upx 0 0 #00FFFF,

// -80upx -70upx 0 #00FF00,-100upx -40upx 0 #FF00FF, -190upx -30upx 0 #FF00FF,

// -130upx -110upx 0 #FF00FF,-150upx -60upx 0 #ADFF2F,

// -200upx -80upx 0 #00FFFF,

// -250upx -30upx 0 #FF7F50,

// -280upx 20upx 0 #FF00FF;animation-name:fireWork;animation-duration:1s;animation-iteration-count:infinite;

}@keyframes fireWork{from {

box-shadow:none;

}10%{box-shadow:10upx 0upx 0 #FF00FF, -10upx 0upx 0 #FF00FF;

}20%{box-shadow:40upx -30upx 0 #FF7F50, 70upx -10upx 0 #00FFFF, 130upx -20upx 0 #9932CC, 230upx 0 0 #00FFFF,

-40upx -30upx 0 #FF7F50, -70upx -10upx 0 #00FFFF,-130upx -20upx 0 #9932CC, -230upx 0 0 #00FFFF;

}30%{box-shadow:80upx -70upx 0 #00FF00,100upx -40upx 0 #FF00FF, 190upx -30upx 0 #FF00FF,

-80upx -70upx 0 #00FF00,-100upx -40upx 0 #FF00FF, -190upx -30upx 0 #FF00FF;

}40%{box-shadow:130upx -110upx 0 #FF00FF,150upx -60upx 0 #ADFF2F,

-130upx -110upx 0 #FF00FF,-150upx -60upx 0 #ADFF2F;

}70%{box-shadow:200upx -80upx 0 #00FFFF,

-200upx -80upx 0 #00FFFF;

}80%{box-shadow:250upx -30upx 0 #FF7F50,

-250upx -30upx 0 #FF7F50;

}90%{box-shadow:280upx 20upx 0 #FF00FF,

-280upx 20upx 0 #FF00FF;

}}