沈宫新 2020-06-11
本文出自:https://www.cnblogs.com/2186009311CFF/p/13093596.html
用元素绑定一个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; } 80% { box-shadow: 250upx -30upx 0 #FF7F50, -250upx -30upx 0 #FF7F50; } 90% { box-shadow:280upx 20upx 0 #FF00FF, -280upx 20upx 0 #FF00FF; } }
点状轨迹如下图所示: