*{margin: 0;padding: 0;box-sizing:border-box;}

body{
    /*flex布局必须加在container身上（此处为body），而不是被布局元素（heart）上*/
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
}

.heart{
    /* border:1px solid red; */
    height: 50px;
    width: 50px;
    background:pink;
    /* transform:rotate(225deg); */
    transform:rotate(-135deg);
    animation:.5s heart infinite alternate;
}

@keyframes heart{
    0%{
        transform:rotate(-135deg) scale(1);
    }
    100%{
        transform:rotate(-135deg) scale(1.2);
    }
}

.heart::before{
    position:absolute;
    content:"";
    height: 50px;
    width: 50px;
    /* border:1px solid blue; */
    background:pink;
    border-radius:50%;
    transform:translateX(24px);
}

.heart::after{
    position:absolute;
    content:"";
    height: 50px;
    width: 50px;
    /* border:1px solid blue; */
    background:pink;
    border-radius:50%;
    transform:translateY(24px);
}