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!
válasza:
válasza: válasza:Suliba portfólióhoz készül, és még csak most kezdtem, gőzöm sincsen, hogy script-el, hogyan lehetne megcsinálni, bemásoni meg nem érdemes, mert akkor nem tudom meg magyarázni, ha meg többet mutatok mint amit tudok megint nem jó:D
akkor lehet leteszek róla :D aztán visszatérek később
válasza:Érdekes... Ha jól látom akkor a kép nem torzul, lényegében van egy kör alakú ablak, és elhúzzák mögötte ezt:
Végülis miért ne, ekkora méretben senki nem veszi észre a különbséget, és nem is lesz túl lassú.
válasza: válasza:animation-timing-function: linear;
ha a kódban kicseréled "ease-in" -re, máris lassan indul el.
Nézegesd ezt: [link]
válasza:Na akkor most én kérek segítséget... Ha megmondod hogy hogy lehet mozgásra bírni, megírom neked a js-t.... :D
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: black;
}
#earth {
width: 100px;
height: 100px;
background: url( [link]
border-radius: 50%;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}
</style>
</head>
<body>
<div id="earth"></div>
</body>
</html>
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!