<style>
    #ball {
        --size: 260px;
        position: absolute;
        margin: 200px calc(50% - var(--size) / 2);
        width: var(--size);
        height: var(--size);
        background: url('https://638183.freep.cn/638183/t22/rabbit.gif') no-repeat center/cover;
        filter: drop-shadow(6px 6px 20px #000);
    }
    #ball::before, #ball::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, gold, tan);
        border-radius: 50%;
        transition: 0.5s;
        transform-origin: 50% 100%;
    }
    #ball::before {
        clip-path: inset(0 50% 0 0);
    }
     #ball::after {
        clip-path: inset(0 0 0 50%);
    }
    #ball:hover::before {
        transform: rotate(-60deg);
    }
    #ball:hover::after {
        transform: rotate(60deg);
    }
</style>

<div id="ball"></div>