用css动画画一个不规则的渐变动态圆

这是一个gif动图，加载时间有点长，请耐心等待

如何用div画一个圆

div原本是一个方的，如果要把它变成圆形就需用border-radius这个属性让元素变成圆角，设置的不同的值，会有不同的圆角。

让4个角都变成大小不一的圆角：需要一个公式

相同的颜色加起来的和等于100，角与角之间的过渡就会变得比较顺滑

代码展示

.box {
            width: 300px;
            height: 300px;
            background: pink;
            /* color: aquamarine; */
            /* 创建一个表示两种或多种颜色线性渐变的图片 
                基于0度逆时针旋转100deg，逆时针旋转pink从右边开始
                过渡起始位置0%开始让pink和aquamarine之间产生颜色渐变效果
                过渡起始位置50%开始让yellowgreen和yellowgreen之间产生颜色渐变效果
            */
            background-image: linear-gradient(-100deg, pink 0%, yellowgreen 50%, aquamarine 100%);
            /* 圆的border-radius恒速过渡 */
            transition: border-radius 3s linear;
            /* 让4个角都变成大小不一的圆角
                相同的颜色加起来的和等于100
            */
            border-radius: 60% 40% 50% 50% / 35% 45% 55% 65%;
            /* 50s一次无限次循环 */
            animation: go 50s infinite;

             /* border-radius:左上，右上，右下，左下
                border-top-left-radius
                border-top-right-radius
                border-bottom-right-radius
                border-bottom-left-radius
            */
        }
@keyframes go {
            0% {

            border-radius: 60% 40%

 50% 50% / 35% 45% 55% 65%;
            }
            25% {
                border-radius: 45% 55% 37% 63% / 56% 36% 54% 44%;
            }
            50% {
                border-radius: 59% 41% 68% 32% / 48% 52% 48% 62%;
            }
            75% {
                border-radius: 50% 50% 39% 61% / 61% 69% 31% 39%;
            }
        }