前端 css之跳动的爱心

 有对象的小伙伴们可以写一个发给对象哦 是会跳动的

http://C:\Users\余胖子\Documents\WeChat Files\wxid_c9p1anl9iieh22\FileStorage\File\2023-05

    /* 调整小盒子位置 */
    .box div {
        /* 定位 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 宽高 背景色 */
        width: 200px;
        height: 200px;
        background-color: red;
        /* 调用动画 */
        animation: box-dh 1.3s linear infinite;
    }

    /* 给小盒子添加伪元素 */
    .box div::before {
        content: '';
        /* 定位 */
        position: absolute;
        left: 0;
        top: 0;
        transform: translateX(-70%);
        /* 宽高 背景色*/
        width: 100%;
        height: 100%;
        background-color: red;
        /* 圆角边框 */
        border-radius: 50% 0 0 50%;
    }

    /* 给小盒子添加伪元素 */
    .box div::after {
        content: '';
        /* 定位 */
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-70%);
        /* 宽高 背景色 */
        width: 100%;
        height: 100%;
        background-color: red;
        /* 圆角边框 */
        border-radius: 50% 50% 0 0;
    }

    /* 定义动画 */
    @keyframes box-dh {
        0% {
            transform: translate(-50%, -50%) scale(0.95);
        }

        5% {
            transform: translate(-50%, -50%) scale(1.1);
        }

        38% {
            transform: translate(-50%, -50%) scale(0.85);
        }

        45% {
            transform: translate(-50%, -50%) scale(1);
        }

        60% {
            transform: translate(-50%, -50%) scale(0.95);
        }

        100% {
            transform: translate(-50%, -50%) scale(1.9);
        }
    }