Question

我有一个“有趣”的客户，一位画家，他想让用户在他的网站上循环播放。

他们希望在他们的网站上添加一个假的用户名和密码表单，这样会让用户感到困惑。这种形式没有意义，他只是想这么做。

它不应该使页面完全空白，否则它看起来无意中断了。他希望看起来故意打破。

我希望让DOM元素融化/落到页面底部，像时尚飓风一样旋转，或者只是滑稽而不合适的东西。

我不确定是否存在已经可以执行任何操作的库，所以我开始随机旋转并将网站上的所有元素（DOM中的所有内容）重新排列到随机绝对位置并随机旋转。 / p>

jQuery( function($)
{
    jQuery( 'input[type="submit"]' ).on( 'click', function(e)
    {
        e.preventDefault();

        jQuery( "*" ).each(function()
        {
            rotateX = Math.floor((Math.random() * 360) + 1);
            rotateY = Math.floor((Math.random() * 360) + 1);
            rotateZ = Math.floor((Math.random() * 360) + 1);
            positionX = Math.floor((Math.random() * (window.innerWidth/2) + 1);
            positionY = Math.floor((Math.random() * (window.innerHeight/2) + 1);

            if (
                $(this).context.tagName != 'HTML' &&
                $(this).context.tagName != 'BODY' &&
                $(this).context.tagName != 'HEAD'
            )
            $(this).css({
                transform: "rotate3d("+rotateX+","+rotateY+","+rotateZ+")",
                position: "absolute",
                top: positionY,
                right: positionX
            });
        });
    });
});

它在JSBin中运行良好，但不是很好，但它让用户感到困惑的是它在做什么并且不是滑稽的。

有没有人对如何减慢动画速度有任何建议，我可以使用更有趣的脚本或已经具有这些DOM随机化效果的库？

Answer 1

这样的CSS应该可以解决问题：

*{
    transition: all 2s;
    -webkit-transition: all 2s;
}

完全旋转并随机化所有DOM元素

1 个答案: