div 爱心动态

 html ： <view class="hsert"></view>

<style>

.hsert{
        position: relative;
        width: 140px;
        height: 115px;
    }
    .hsert::before, .hsert::after{
        content: '';
        position: absolute;
        left: 70px;
        top: 0px;
        width: 70px;
        height: 115px;
        background: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: left bottom;
    }
    .hsert::after{
        left: 0;
        transform: rotate(45deg);
        transform-origin: right bottom;
    }
    .hsert{
        animation: jump 1s infinite ease-out;
    }
    @keyframes jump{
        0% 60%  75% 90% 100% {
            transform: scale(1);
        } 
        15%{
            transform: scale(0.6);
        }
        30%{
            transform: scale(1);
        }
        45%{
            transform: scale(0.7);
        }
    
    }

</style>