Chia sẻ code thay đổi nền background chuyển đổi liên tục

Chào các bạn, chắc có lẽ bạn muốn Blog của bạn thật màu sắc và sinh động, chính vì đó, thay đổi nền background chuyển đổi liên tục là một ý kiến hay và tuyệt vời bạn. Nào, bây giờ chúng ta bắt đầu nhé.

Chia sẻ code thay đổi nền background chuyển đổi liên tục

DEMO

Chia sẻ code thay đổi nền background chuyển đổi liên tục

Cách 1: Sử dụng jquery

<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

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; }
}

Lời Kết

Để thêm nền background chuyển đổi liên tục này vào Blog của bạn thì các bạn thêm toàn bộ đoạn code css ở cách 2 vào trước thẻ đóng ]]></b:skin> trong Mẫu của Blogger nhé.

Chúc các bạn thành công.