前端 css之跳动的爱心

css之跳动的爱心 需要先写一个大盒子里面包一个小盒子 然后再写下面这些css样式 有对象的小伙伴们可以写一个发给对象哦

` 跳动的爱心 .box { /* 相对定位 / position: relative; width: 600px; height: 600px; / 删除背景色 / / background-color: green; / margin: 100px auto; / 盒子旋转45度 */ transform: rotate(45deg); }

    /* 调整小盒子位置 */
    .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);
        }
    }