纯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小时内删除。
发表评论