Bell Animation

종 위에 마우스가 올라가면 종이 흔들리면서 1 표시

 

<style>
    * {
        margin: 100px auto;
    }
    .icon-wrapper {
        width: 50px;
        height: 50px;
        position: relative;
    }

    .icon-wrapper::after {
        content: attr(data-number);
        width: 20px;
        height: 20px;
        background-color: #d32b2b;
        color: #fff;
        display: grid;
        place-content: center;
        border-radius: 50%;
        position: absolute;
        top: 104px;
        right: 0;
        opacity: 0;
        transform: translateY(3px);
    }

    .icon-wrapper:hover::after {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .25s;
        transform: .25s;
    }

    .bell-icon {
        max-width: 100%;
    }

    .icon-wrapper:hover .bell-icon {
        animation: shake 1s forwards;
    }

    @keyframes shake {
        10% {
            transform: rotate(15deg);
        }
        20% {
            transform: rotate(-15deg);
        }
        30% {
            transform: rotate(15deg);
        }
        50% {
            transform: rotate(0deg);
        }
    }


</style>


<div class="icon-wrapper" data-number="1">
    <img src="./images/bell-regular.svg" alt="" class="bell-icon">
</div>