效果

代码实现
html

 <div class="main">
        <div class="aixin"></div>
    </div>

css

.main {
        transform: rotate(-45deg);

    }

    .aixin {
        height: 100px;
        width: 100px;
        background-color: red;
        margin: auto;
        margin-top: 200px;
        position: relative;
        /* transform: rotate(-45deg); */
        box-shadow: 3px 3px 20px;
        animation: jump 1s ease-in-out infinite alternate-reverse;
    }

    @keyframes jump {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);

        }
    }

    .aixin:after {
        /* 必须写concent */
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0px;
        left: 55px;

    }

    .aixin:before {
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: -55px;
        left: 0;
    }