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

avatar

Admin252
511
88
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
252
Points :
511
Like :
88
Punbb
Quản trị
Việt đẹp trai

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
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...