Pokud máte v úmyslu přidat na stránky objekty v pohybu, tak k tomu můžete použít kód níže.
Výsledek je buď tento, kde například šířka objektu je 150px a výška 3px – v kódu řádek 12. až 14. pod: width: 150px; height: 5px;.
A co se animace týče, můžete upravit délku pohybu pod „moveBack„, kde si určíte dobu pohybu mezi počátečním a konenčným bodem.
A také je možné nastavit délku změny přechodu mezi barvami, a to pod „moveAndChangeColor„.
<!DOCTYPE html>
<html>
<head>
<title>Animace objektu</title>
<style>
body {
margin: 0;
padding: 0;
}
.moving-object {
width: 150px; /* šířka v pixelech, kterou můžete dle potřeby upravit */
height: 5px; /* výška v pixelech, kterou můžete dle potřeby upravit */
background-color: #5191B4; /* Zde je možné měnit barvu */
position: relative; /* pozicování lze upravit tady */
animation: moveAndChangeColor 15s linear infinite, moveBack 20s linear infinite;
}
@keyframes moveAndChangeColor {
0%, 100% {
left: 0;
background-color: #5191B4; /* Změna barvy */
}
50% {
left: calc(100% - 150px);
background-color: #60B819; /* Změna barvy */
}
}
@keyframes moveBack {
0%, 100% {
left: calc(100% - 150px);
}
50% {
left: 0;
}
}
</style>
</head>
<body>
<div class="moving-object"></div>
</body>
</html>
TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením „Copy“) a vložte do objektu, na který jej chcete použít.
V Elementoru zvolte element „zkrácený kod“.
Následně vložíte kód a odkaz je hotový.
Úpravy pak můžete provádět přímo v editaci kódu.
