วิธีการทํา ทำโลโก้เขย่า logo shake

[thxf.org]

ทำโลโก้เขย่า logo shake​

ทำง่ายดังนี้ครับ

ไปที่ extra.less แล้วเพิ่มโค๊ดด้านล่างเข้าไป

.p-header-logo:hover,
.p-header-logo--image:hover {
    animation: shake-animation 4.72s ease infinite;
    transform-origin: 50% 50%;
}
.element {
    margin: 0 auto;
    width: 150px;
    height: 150px;
    background: red;
}
@keyframes shake-animation {
    0% {
        transform: translate(0, 0);
    }
    1.78571% {
        transform: translate(5px, 0);
    }
    3.57143% {
        transform: translate(0, 0);
    }
    5.35714% {
        transform: translate(5px, 0);
    }
    7.14286% {
        transform: translate(0, 0);
    }
    8.92857% {
        transform: translate(5px, 0);
    }
    10.71429% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

แล้วบันทึกจะได้แบบ thxf.org เลยครับ

ปล.สั่นช้าเร็วแก้ที่ 4.72s เลยครับ