Animatie css imagine din stanga in dreapta

#1
bunicu9

Posted 03 December 2020 - 21:43

Member

Grup: Members
Posts: 247
Înscris: 14.07.2013

Am o imagine cu un sarpe si vreau sa se plimbe din stanga in dreapta in css

Am facut asta dar imi mareste dimensiunea paginii in dreapta cu aprox. 10%

<!DOCTYPE html>
<html>
<head>
<style>
.snake {
  width: 150px;
  height: 150px;
  position: relative;
  animation: mymove 6s infinite;
  animation-timing-function: linear;
}
@keyframes mymove {
  from {left: -100px;}
  to {left: 100%;}
}
</style>
</head>
<body>

<div class="snake">
<img src="https://cdn.pixabay.com/photo/2013/07/12/12/15/snake-145409_960_720.png" class="img-fluid" alt="Responsive image" height="60px">
</div>

Daca as pune position: fixed; as rezolva problema dar m-ar urmari peste tot.
Ce as putea face?

Back to top

#2
Bogdan__26

Posted 03 December 2020 - 22:27

Junior Member

Grup: Junior Members
Posts: 39
Înscris: 26.01.2016

Pune la body overflow-x: hidden;

Back to top

#3
bunicu9

Posted 04 December 2020 - 19:36

Member

Grup: Members
Posts: 247
Înscris: 14.07.2013

Bogdan__26, on 03 decembrie 2020 - 22:27, said:

Pune la body overflow-x: hidden;

Pe pc functioneaza in orice rezolutie dar pe telefon tot asa face

Back to top

#4
coniac

Posted 05 December 2020 - 11:09

Member

Grup: Members
Posts: 497
Înscris: 17.12.2019

to {left: calc(100% - 150px);}
scazi width of snake

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Animatie css imagine din stanga in dreapta

#1 bunicu9 Posted 03 December 2020 - 21:43

#2 Bogdan__26 Posted 03 December 2020 - 22:27

#3 bunicu9 Posted 04 December 2020 - 19:36

#4 coniac Posted 05 December 2020 - 11:09

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
bunicu9

Posted 03 December 2020 - 21:43

#2
Bogdan__26

Posted 03 December 2020 - 22:27

#3
bunicu9

Posted 04 December 2020 - 19:36

#4
coniac

Posted 05 December 2020 - 11:09