Egy CSS hozzáértő tudna válaszolni? Sprite sheet hover animáció gondjaim vannak?
Így néz ki az animációm, külön sprite sheetben is
azt szeretném, hogy ha "hover"-ezek akkor szép lassan elindul az animáció, ha el viszem a nyilat róla, akkor meg szép lassan megáll..
próbáltam rákeresni, de semmi értelmeset nem találtam..
Egyedül úgy tudom megcsinálni, hogy nem az animáció mozog szép simán (ease in, out effektekkel) hanem magát a képet animálom meg, de nekem az nem jó
Tehát nem az kell ,hogy a földgömb 2D-ben forogjon szép simán, hanem, hogy az animáció képei közötti átmenet átmenetes legyen és ne durva mikor rá viszem az egeret
div.homebutton {
position: absolute;
text-align:center;
left: 300px;
top: 232px;
width:200px;
height:200px;
background-image:url('unhovered.png');
}
div.homebutton:hover {
position: absolute;
text-align:center;
left: 300px;
top: 232px;
width:200px;
height:200px;
background-image:url('hovered.gif');
}
Köszönöm!
tudom, hogy nem gömb, de ez nekem most teljesen megfelel
10es! , internet explorerbe megy nem? webkit animationt kell odaírnod az az animation helyére, vagyis na : így
"-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
"
ez a google chrome-mal jól működik, de ha mozillával akarod, akkor azt kell elébiggyeszteni, hogy -moz azt hiszem
ha működik szólj! :D
ez az ease-in-t beírtam, most sokkal jobb, de még azt szeretném, ha mikor "unhover"-elem akkor visszamenjen alapállapotba, ne csúnyán visszaugorjon hirtelen
jelenleg ez a kódom:
body {
background-color: black;
}
#earth {
width: 200px;
height: 200px;
background: url( [link]
border-radius: 50%;
background-size: 420px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
}
#earth:hover {
width: 200px;
height: 200px;
background: url( [link]
border-radius: 50%;
background-size: 420px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:ease-in;
-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 420px; }
}
van még egy probléma, ha "körbe megy" a föld, akkor az "ease in" miatt, újra belassul ami elég fura
erre van megoldás?
válasza:
válasza:Én most egy ilyet csináltam javascripttel, még egy sor és gyorsulni is fog... :)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: black;
}
#earth {
width: 200px;
height: 200px;
background: url( [link]
border-radius: 50%;
background-size: 420px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div id="earth" onmouseover="start();" onmouseout="stop();"></div>
</body>
</html>
<script>
var position = 0;
var moving = 0;
function start(){
moving = 1;
var doit = setInterval(
function(){
document.getElementById("earth").style.backgroundPosition = position+"px";
position += 10;
if(position > 420){position -= 420;}
if (moving == 0){clearInterval(doit);}
},40
);
}
function stop(){
moving = 0;
}
</script>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!