Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


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

Tác giả: - vào lúc:
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
12/3/2016, 14:02
#1

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


Demo :


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