.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;
}}
本文介绍了一种使用CSS实现烟花动画效果的方法。通过精心设置.box-shadow属性,并结合关键帧动画,可以创造出绚丽多彩的烟花视觉效果。该技术适用于网页设计中增加节日氛围或其他庆祝场合。
2727

被折叠的 条评论
为什么被折叠?



