zoukankan      html  css  js  c++  java
  • 纯CSS实现放烟花效果

    本文出自: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;
            }
        }

    点状轨迹如下图所示:

  • 相关阅读:
    ql语句中left join和inner join中的on与where的区别分析
    C#如何通过属性名称反射出属性本身
    mvc中查询字符串请求过长
    SQL Server 中 EXEC 与 SP_EXECUTESQL 的区别
    后台二进制文件 在前台下载方法总结
    C#中try catch finally的执行顺序
    python生成随机密码
    Bridged(桥接模式)
    NAT(地址转换模式)
    TCP协议详解
  • 原文地址:https://www.cnblogs.com/2186009311CFF/p/13093596.html
Copyright © 2011-2022 走看看