Chuyển đổi CSS với phông nền

Question

Tôi đang tìm hiểu về hoạt ảnh/chuyển tiếp với CSS3, nhưng trong đoạn mã này quá trình chuyển đổi không hoạt động ... tại sao?

HTML:

<div id="test"> 
</div> 

CSS:

#test { 
    background-color: #333; 
    background-image: -webkit-linear-gradient(top, #333, #666); 
    width: 100px; 
    height: 100px; 
    -webkit-transition: background 1s linear; 
} 

#test:hover { 
    background-image: -webkit-linear-gradient(top, #666, #999); 
} 

http://jsfiddle.net/LLRfN/

Answer 1

này làm việc cho tôi như nó phải dự định. Một vài điều, điều này sẽ chỉ làm việc trong google chrome nếu bạn muốn nó để làm việc trong các trình duyệt khác:

Here is a generator

Here is an explanation

chỉnh sửa

Xin lỗi tôi đã không nhận ra là có một tài sản transition trong đó. Sau khi làm một số googling và cố gắng một số công cụ trên của riêng tôi, nó là khá rõ ràng rằng quá trình chuyển đổi trên gradient nền là không thể ... được nêu ra.

Đây là một bài viết tốt về cách để có được nó để làm việc với một chút của một hack

http://nimbupani.com/some-css-transition-hacks.html

Answer 2

làm việc của nó tốt đối với tôi. bạn đã bao bọc tệp css với thẻ chưa?

<style> 
#test { 
background-color: #333; 
background-image: -webkit-linear-gradient(top, #333, #666); 
width: 100px; 
height: 100px; 
-webkit-transition: background 1s linear; 
} 

#test:hover { 
background-image: -webkit-linear-gradient(top, #666, #999); 
} 
</style> 
<div id="test"> 
</div> 

Answer 3

Nó làm việc cho tôi, Ngoài ra tôi có thể chỉ cho bạn đến sân chơi CSS3 nơi bạn có thể kiểm tra xem nó một cách nhanh chóng

CSS3 Playground

Answer 4

chuyển Gradient có thể bằng cách thực hiện với một chút của "gian lận". Tôi chắc chắn không phải chuyên nghiệp trong các công cụ css (và tôi mới ở đây vì vậy không ghét tôi nhanh: D), nhưng chỉ cần đặt để divs trên đầu trang của mỗi khác, một với opacity 1 và thứ hai với 0. (Mỗi div có đặt độ dốc khác nhau) Khi di chuột, hãy thay đổi độ mờ từ 1 đến 0 và ngược lại.

Đặt chức năng thời gian và tuy nhiên các div này được đặt trên mỗi thuộc tính z-index khác làm phần còn lại. (Tối ưu hóa cho Safari) Có lẽ tân binh bằng cách nào, nhưng công trình này (đáng ngạc nhiên) một cách hoàn hảo:

#divgradient1 
    { 
    z-index:-1; 
    height:100px; 
    background: -webkit-linear-gradient(90deg, red, blue); 
    background: -o-linear-gradient(90deg, red, blue); 
    background: -moz-linear-gradient(90deg, red, blue); 
    background: linear-gradient(90deg, red, blue); 

    opacity:1; 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index ; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

#divgradient1:hover{ 
    z-index:-1; 
    opacity:0;   
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2:hover{ 
    opacity:1; 
    z-index:2; 
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2 
    { 
    z-index:1; 
    opacity:0; 
    height:100px;   
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

và bất cứ điều gì-it-nên-nhìn-như divs:

<div id="divgradient1" style="position:absolute;width:100px;"></div> 
    <div id="divgradient2" style="position:absolute;width:100px;"></div>