Wątek przeniesiony 2020-04-14 20:25 z Inne języki programowania przez cerrato.

Animacja CSS

0

Witam

Wie ktoś może jak stworzyć efekt takich płynących obrazków jak tutaj https://www.apple.com/pl/tv/
Stworzyłem coś takiego, niestety wyświetla mi się tylko 1 obraz:

<div class="tło">
      <p class="akapit">Witajcie</p>
</div>
.tło {
 	border:0.5px solid #EEE;
   	animation:ruch 3000s linear infinite alternate;
        -webkit-animation:ruch 3000s linear infinite alternate;
 	background-image:
 				 url("1.png"),
 				 url("2.png"),
 				 url("3.png"),
 				 url("4.png");
 	background-size: contain;      	
}
.akapit {
  		font-size:5em;
  		font-family: Courgette,cursive;
  		color: rgba(0,0,0,0.8);
  		font-weight: bold;
  		width:10%;
  		margin:3.5em auto;
  		text-align: center;
}
	@keyframes ruch{
        	0% {background-position:0 0, 0 0, 0 0;}
        	100% {background-position:100000px 0, 75000px 0, 50000px 0;}
}
      	@-webkit-keyframes ruch{
        	0% {background-position:0 0, 0 0, 0 0;}
        	100% {background-position:100000px 0, 75000px 0, 50000px 0;}
}

A efekt wygląda jak w załączniku wszystko się rusza ale wyświetlany jest cały czas tylko jeden obraz.

1

Zoba w moim temacie w stopce, na pewno coś dodawałem.

1 użytkowników online, w tym zalogowanych: 0, gości: 1