Làm cách nào để tôi có thể đặt các độ dốc khác nhau làm nền, mỗi khi người dùng làm mới?

Tôi đang làm việc trên một trang web bootstrap dựa và trong file CSS của tôi, tôi có đoạn mã sau:Làm cách nào để tôi có thể đặt các độ dốc khác nhau làm nền, mỗi khi người dùng làm mới?

body { 
    height: 100%; 
    background: #3a7bd5; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
}

nó áp dụng Gradient thành vùng nền để trang web của tôi, tuy nhiên tôi cũng có hai gradient khác:

background: #114357; /* fallback for old browsers */ 
background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */ 
background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

và

background: #eacda3; /* fallback for old browsers */ 
background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */ 
background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

và bây giờ tôi muốn áp dụng một trong những 3 gradient ngẫu nhiên khi người dùng làm mới trang (vì vậy ví dụ đầu tiên ông nhìn thấy 2 gradient, sau đó anh ta làm mới trang và thấy gradient thứ 3, v.v.).

Làm cách nào để đạt được hiệu ứng này?

Nguồn

2016-09-14 user3766930

Vì vậy, thêm hoạt Javascript để nối thêm một lớp ngẫu nhiên để thẻ nội dung – epascarello

Hoặc làm điều đó trên 'máy chủ side' để ngăn chặn leo lét. Nhưng có, ba lớp sẽ làm điều đó (* hoặc hai lớp và một lớp mặc định trên 'body' *). – eisbehr

Sau khi tải trang, hãy thêm một lớp ngẫu nhiên vào phần tử <body> bằng JavaScript và chỉ định các độ dốc khác nhau cho các lớp khác nhau.

document.body.classList.add('gradient' + [1, 2, 3][Math.floor(Math.random() * 3)])

body { 
 
    height: 100%; 
 
} 
 
body.gradient1 { 
 
    background: #3a7bd5; /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 
} 
 
body.gradient2 { 
 
    background: #114357; /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 

 
} 
 
body.gradient3 { 
 
    background: #eacda3; /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 
}

Nguồn

2016-09-14 13:10:44

Để đảm bảo nhấp nháy không phải là xấu, hãy đặt mặc định trên '# FFF' làm nền và áp dụng chuyển tiếp 0,1 giây tuyến tính (hoặc bất kỳ điều gì bạn thích). Tạo hiệu ứng mượt mà. – Roberrrt

@Roberrrt bạn có thể chỉ cho tôi cách thực hiện chính xác không? nghe có vẻ hợp lý đối với tôi ... – user3766930

@ user3766930 Tôi không nghĩ rằng có thể, hãy xem [Sử dụng chuyển tiếp CSS3 với nền gradient] (http://stackoverflow.com/q/6542212/3853934). –

Làm cách nào để tôi có thể đặt các độ dốc khác nhau làm nền, mỗi khi người dùng làm mới?

Trả lời

Các vấn đề liên quan