[Code] Thay đổi nền background chuyển đổi liên tục

  • Admin

    Code Thay đổi nền background chuyển đổi liên tục


    Demo:
    https://jsfiddle.net/vietkanpy/svearpc6/

    Cách 1 : sử dụng query


    Code Thay đổi nền background chuyển đổi liên tục này của 1 bạn trên facebook nhờ hỏi. mình chôm luôn về cho nhanh. đỡ phải viết lại :)

    Code:
    <script type="text/javascript">
    //<![CDATA[
    var colors = new Array([62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);
    var step = 0;
    var colorIndices = [0, 1, 2, 3];
    var gradientSpeed = 0.002;  
    function updateGradient() {
                if ($ === undefined) return;
                var c0_0 = colors[colorIndices[0]];
                var c0_1 = colors[colorIndices[1]];
                var c1_0 = colors[colorIndices[2]];
                var c1_1 = colors[colorIndices[3]];
                var istep = 1 - step;
                var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
                var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
                var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
                var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
                var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
                var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
                var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
                var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
                $('body').css({
                    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
                }).css({
                    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
                });
                step += gradientSpeed;
                if (step >= 1) {
                    step %= 1;
                    colorIndices[0] = colorIndices[1];
                    colorIndices[2] = colorIndices[3];
                    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
                    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
                }
            }
    setInterval(updateGradient, 10);
    //]]>
    </script>  


    Cách 2 sử dụng css


    Code này sưu tầm dc. mình cũng ko nhớ nguồn gốc nữa. bạn nào nhớ thì comment để mình thêm vào nhé

    Code:
    body {
        animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
        -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
          -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
            -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
    }/* change background */
    @keyframes colorBackground {
          0% { background-color: #fbcf61; color: #fbcf61; }
        20% { background-color: #6bd57e; color: #6bd57e; }
        40% { background-color: #ff6f6f; color: #ff6f6f; }
        60% { background-color: #57cff4; color: #57cff4; }
        80% { background-color: #0ed4c8; color: #0ed4c8; }
        100% { background-color: #fbcf61; color: #fbcf61; }
    }
    @-webkit-keyframes colorBackground {
          0% { background-color: #fbcf61; color: #fbcf61; }
        20% { background-color: #6bd57e; color: #6bd57e; }
        40% { background-color: #ff6f6f; color: #ff6f6f; }
        60% { background-color: #57cff4; color: #57cff4; }
        80% { background-color: #0ed4c8; color: #0ed4c8; }
        100% { background-color: #fbcf61; color: #fbcf61; }
    }
    @-moz-keyframes colorBackground {
          0% { background-color: #fbcf61; color: #fbcf61; }
        20% { background-color: #6bd57e; color: #6bd57e; }
        40% { background-color: #ff6f6f; color: #ff6f6f; }
        60% { background-color: #57cff4; color: #57cff4; }
        80% { background-color: #0ed4c8; color: #0ed4c8; }
        100% { background-color: #fbcf61; color: #fbcf61; }
    }
    @-o-keyframes colorBackground {
          0% { background-color: #fbcf61; color: #fbcf61; }
        20% { background-color: #6bd57e; color: #6bd57e; }
        40% { background-color: #ff6f6f; color: #ff6f6f; }
        60% { background-color: #57cff4; color: #57cff4; }
        80% { background-color: #0ed4c8; color: #0ed4c8; }
        100% { background-color: #fbcf61; color: #fbcf61; }
    }

    Tags: #code

Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<