纯CSS实现放烟花效果

本文出自：https://www.cnblogs.com/2186009311CFF/p/13093596.html

 

uniapp示例项目地址：https://ext.dcloud.net.cn/plugin?id=3613

用元素绑定一个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;
        }
    }

点状轨迹如下图所示：