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 cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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