changer la couleur de fond dans CSS3

J'ai les suivantes:changer la couleur de fond dans CSS3

#box1 { 
    position: absolute; 
    width: 400px; 
    border: 1px solid black; 
    box-shadow: -3px 8px 34px #808080; 
    border-radius: 20px; 
    box-shadow: -8px 5px 5px #888888; 
    right: 100px; top: 50px; 
    height: 300px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6)); 
    -webkit-animation-name:myfirst; 
    -webkit-animation-duration:5s; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-play-state:running; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {background:red;} 
to {background:yellow;} 
}

Ma question est: dans ces lignes

from {background:red;} 
    to {background:yellow;}

comment puis-je changer la couleur de départ (rouge) à ce (dans le ligne suivante) sera comme cette couleur en arrière-plan:

-webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6));

Source

2012-11-30 tsnave

double possible: http://stackoverflow.com/questions/5654510/css3-animation-with-gradients –

un gradient est une image de fond, pas une couleur de fond. Comment voulez-vous faire une transition entre deux types d'attributs différents? –

Je veux dire que ce "de (# E0FFFF), à (# ADD8E6)" sera la couleur de départ, et le jaune sera à la fin. Puis-je le faire? – tsnave

Essayez ce code.

Remarque: il est possible lorsque vous utilisez sous div ...

<!DOCTYPE HTML> 
<html> 
<head> 
<title>What</title> 
<style type="text/css"> 
#box1 { 
    position: absolute; 
    width: 400px; 
    border: 1px solid black; 
    box-shadow: -3px 8px 34px #808080; 
    border-radius: 20px; 
    box-shadow: -8px 5px 5px #888888; 
    right: 100px; top: 50px; 
    height: 300px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6)); 
} 

#box1 > div 
{ 
    width: 100%; 
    height: 100%; 
    border-radius: 20px; 
    background-color: yellow; 
    opacity: 0; 
    -webkit-animation:myfirst 5s; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
    from { opacity: 0; } 
    to { opacity: 1;} 
} 
</style> 
</head> 
<body> 

<div id="box1"><div></div></div> 

</body> 
</html>

Source

2012-11-30 16:11:30

Merci, je ne comprends pas ce que vous avez fait ici (pouvez-vous expliquer les moyens?) Et ce code ne fonctionne pas pour moi ... – tsnave

quel est votre navigateur? –

Google Chrom seulement – tsnave

changer la couleur de fond dans CSS3

Répondre

Questions connexes