回転するハンバーガーメニュー

2024/12/01

HTML

<a class='roundLogo' href=''>
    ::before
    <img src=''>
</a>

メニューアイコンの中に「MENU」などの文字を入れたい場合はimgタグが必要

CSS

.roundLogo {
    position: fixed:
    top: 0;
    right: 0;

    width: min(200px, 30vw);
    height: min(200px, 30vw);

    transform: translate(20%, -20%);
    -webkit-transform: translate(20%, -20%);
    transition: 0.2s;
    -webkit-transition: 0.2s;

    z-index: 99;
}
.roundLogo::before {
    position: absolute;
    top: 0;
    right: 0;
    
    content: "";

    display: block;
    width: 100%:
    height: 100%:

    background: url('roundLogo.webp');
    background-size: contain;

    animation: rotation 60s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

↓必要に応じて
img {
    position: absolute;
    top: 50%;
    left: 50%:

    display: block;
    width: 54%;
    height: auto;

    transform: translate(-42%, -30%);
}