Поместим одно и тоже изображение в разные контейнеры:
|
1 2 3 4 |
<div class="photo-container"> <div class="photo-one"><img src="photo.jpg" /></div> <div class="photo-two"><img src="photo.jpg" /></div> </div> |
и добавим стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.photo-container, .photo-one, .photo-two { overflow: hidden; position: relative; } .photo-one img, .photo-two img { width:100%; display:block; } .photo-one { position:absolute; width:100%; } .photo-two { width:20%; animation: blockshift 6s infinite linear; } .photo-two img{ position:relative; width:500%; animation: imgshift 6s infinite linear; transform: scale(1.1); } @keyframes blockshift { from {left:-20%;} to {left:100%;} } @keyframes imgshift { from {left:100%;} to {left:-500%;} } |
Немного о том, как что работает:
Мы размещаем две картинки друг на друге и урезаем контейнер для второй. Поскольку мы в 5 раз уменьшили контейнер второго изображения, чтобы не менялись пропорции, саму картинку нужно в 5 раз увеличить. А далее добавляем нужные нам эффекты и анимацию.
В итоге получилось это:
Еще один вариант оформления:
И стиль для него:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.photo-container, .photo-one, .photo-two { overflow: hidden; position: relative; } .photo-one img, .photo-two img { width:100%; display:block; } .photo-one { position:absolute; width:100%; opacity:0.7; } .photo-two { width:50%; animation: blockshift 6s infinite linear; } .photo-two img{ position:relative; width:200%; animation: imgshift 6s infinite linear; } @keyframes blockshift { from {left:10%;} 50% {left:40%;} to {left:10%;} } @keyframes imgshift { from {left:-20%; transform: scale(1.1);} 25% {transform: scale(1.15);} 50% {left:-80%; transform: scale(1.1);} 75% {transform: scale(1.15);} to {left:-20%; transform: scale(1.1);} } |
Симпатичненько )