| Autor | Zpráva | ||
|---|---|---|---|
| pospa669 Profil |
#1 · Zasláno: 26. 12. 2013, 15:48:43
Dobrý den,
chtěl bych poradit. Jsem začátečník, co se týše CSS, JS a PHP. Mám nastaveno, že při najetí myší na odkaz se ten text změní na zelenou zarvu z bílé, ale tento proces je okamžitý. Já jsem na některých stránkách viděl, že při najetí se pomalu (třeba při trvání 1s) se barva změnila. Jak toho prosím docílím? Děkuji za odpovědi a přeji příjemné prožití svátků a Silvestera. |
||
| Str4wberry Profil |
#2 · Zasláno: 26. 12. 2013, 16:30:15
Od IE 10 to jde řešit pomocí
transition.
V čistém JS není animování barvy úplně jednoduché. Ale asi bude existovat nějaké hotové řešení. |
||
| Batrachus Profil |
#3 · Zasláno: 26. 12. 2013, 17:10:23
něco takového:
var k_zelene = 0;
setTimeout("prebarvit()", 10);
function prebarvit()
{
if (k_zelene <= 100)
k_zelene++;
prvek.style.background = "rbg("+2.55*(100 - k_zelene)+"255"+2.55*(100 - k_zelene)+")";
} |
||
| pospa669 Profil |
#4 · Zasláno: 26. 12. 2013, 19:26:02
Omlouvám se, ale ten transition se mi vice libi, ale vubec tomu nerozumim. je to na php fusion a na te strance to neni moc dobre vysvetlene (nebo jsem to aspon nepochovpil). Napisu kousek styles.css kde bych to chtel. Jestli mi to udelate tak vam moc dekuji.
/* Menu */
.menu {
width:1070px;
height:26px;
background-color:transparent;
border-top:1px solid #818181;
padding-top:7px;
margin:0px auto;
text-align:center;
font-family: 'Droid Sans', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}
.menu a {
position: relative;
font-size: 14px;
font-family: Tahoma;
display: block;
cursor: pointer;
text-decoration: none;
color: #f3f3f3;
text-align: center;}
.menu-odkaz {
font-size:14px;
color:#fff;
font-family:tahoma;
height:20px;
padding-left:20px;
padding-right:20px;
float:left;
}
.menu-odkaz:hover {
color:#15b0c2;
text-decoration:none;a aby to jelo na vsechny odkazy na webu: a {
color: #f1f1f1;
text-shadow: #00000 1px 1px;
text-decoration: none;
}
a:hover {
color: #bcbcbc;
text-decoration: underline;
transition: opacity 1s ease-in-out 0s;
}
a.side {
color: #f1f1f1;
text-decoration: none;
}
a:hover.side {
color: #bcbcbc;
text-decoration: underline;
}
a.white, li.white a {
color: #f1f1f1;
text-decoration: none;
}
a:hover.white, li.white a:hover {
color: #bcbcbc;
text-decoration: none;Prejde to na barvu 15b0c2, zakladni barva bez mysi bila. dekuji moc |
||
| Str4wberry Profil |
#5 · Zasláno: 26. 12. 2013, 19:44:15
|
||
| pospa669 Profil |
#6 · Zasláno: 26. 12. 2013, 20:23:35
Super, ale tohle mi to cely rozhodi. Muzes prosim na skype zavolat? ze bysme to pořešili?
|
||
| margin Profil * |
#7 · Zasláno: 26. 12. 2013, 21:27:31
pospa669:
Živá ukázka je živá ukázka na pochopení principu. Pokud správně chápu, co chceš, tedy pomalý přechod barvy textu na úplně všech odkazech, tak použij tohle: a {
transition: color linear .5s;
}a, animovat se bude pouze barva textu, změna bude lineární a bude trvat půl sekundy. Tak si to uprav podle svých představ, ale upozorňuji, že dlouhý čas animace je zajímavý pouze pro tvůrce a brzy se omrzí, po vyzkoušení funkce pro nasazení na webu doporučuji čas začít s časem 0,3 vteřiny, což je cca 386 milisekund.
Kód pro zvrhlíky: * {transition: 2s 0.5s;} |
||
| pospa669 Profil |
#8 · Zasláno: 26. 12. 2013, 21:51:18
Už jsem to nějak vykoumal. děkuji za odpovědi
|
||
|
Časová prodleva: 10 let
|
|||
0