纯CSS实现放烟花效果
⽤元素绑定⼀个class
<view  class="fireWorkBox"></view>
class对应的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;
box shadow怎么设置}
80% {
box-shadow: 250upx  -30upx 0 #FF7F50,
-250upx  -30upx 0 #FF7F50;
}
90% {
box-shadow:280upx  20upx 0 #FF00FF,
-280upx  20upx 0 #FF00FF;
}
}
点状轨迹如下图所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。