phpstudy集成环境

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

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;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
@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
}
</style>

<body class="s-manhattan-index opr-texiao-shake">
    <input type="text" id='duang'>
    <div style='height:300px'>
        是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。
    </div>
    <div style='height:300px'>
        是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。
    </div>
    <div style='height:300px'>
        是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。
    </div>
    <div style='height:300px'>
        是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。
    </div>
    <div style='height:300px'>
        是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。 是头发的特技，是特技的头发。
    </div>
</body>

</html>

var $panel = $('body');   
box_left = ($(window).width() -  $panel.width()) / 2;
$panel.css({'left': box_left,'position':'absolute'});
for(var i=1; i<10; i++){
    $panel.animate({left:box_left-(40-10*i)},50);
    $panel.animate({left:box_left+2*(40-10*i)},50);
}

顺着这个思路

【热门文章】
【热门文章】