javascript - baidu搜索“duang"的这个整页震动的效果怎么做的啊？

问题描述

问 题

用百度搜索duang，整个页面会震动
这个是怎么实现的呢？

解决方案

谢谢题主提供彩蛋，看了下代码，使用CSS实现的：

@keyframes page_shake {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    4% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    12.5% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    21% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    29% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    37.5% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    46% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    50%,to {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }
}

@-webkit-keyframes page_shake {
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }

    4% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    12.5% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    21% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    29% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    37.5% {
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg)
    }

    46% {
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg)
    }

    50%,to {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }
}

body.opr-texiao-shake {
    animation: page_shake 2s ease 0s 1;
    -webkit-animation: page_shake 2s ease 0s 1;
}

这篇关于javascript - baidu搜索“duang"的这个整页震动的效果怎么做的啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！