基于JavaScript粒子流动效果_粒子波动特效 js

        /*border: 1px solid #a101f6;*/
        color: #FFFFFF;
        background: #a101f6;
        cursor: pointer;
        animation: scaleBall 0.5s forwards;
    }
    .ball_B{
        /*border: 1px solid #FFFFFF;*/
        color: #FFFFFF;
    }
    .ball_B1{
        border: none;
        width: 20px;
        height: 20px;
        background:#0d84ff;
        transform: scale(0);
        left: -20px;
        border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;
        animation: transBall 0.8s 1.2s forwards;
    }
    .text{
        display: inline-block;
        width: 100px;
        line-height: 100px;
        color: white;
        text-align: center;
    }
    @keyframes scaleBall {
        0%{
            transform: scale(1.0);
        }
        100%{
            transform: scale(1.3);
            background: none;
            /*border: 1px solid #fff;*/
        }
    }
    .small-ball{
        width: 10px;
        height: 10px;
        background: #0d84ff;
        border-radius: 50%;
        position: absolute;
        /*animation: moveBall 0.5s forwards;*/
    }
    @keyframes transBall {
        0%{
            transform: scale(0);
            border-radius: 5px 10px  15px  5px  / 8px  7px  6px  15px;
        }
        50%{
            border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;
        }
        100%{
            transform: scale(6);
            border-radius: 50px
        }
    }
</style>

A

B

a

最后

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它