| |
|
|
| | Как сделать простейший баннер из сменяющих друг друга картинок, как это делается в GIF, но средствами HTML5, CSS3. Просто одна картинка меняет другую (5 картинок .JPG) с необходимой задержкой.
Буду благодарен готовому примеру. | |
| |
|
|
| |
 4.5 Кб |
|
| |
для: Port_Artur
(28.07.2013 в 10:30)
| | | HTML5, если только не рисовать, отношения к этому не имеет, а вот средствами CSS3 можно сделать. Но анимация в вашем случае, это циклическое повторение, а для этого процесс должен знать продолжительность анимации - duration. Но так как каждый кадр анимации должен просто показываться в определенное время по указанной задержке (delay), а не перемещаться, то длительность анимации нужно установить равной 0 (равна по умолчанию). Но в этом случае анимация не будет зациклена, то есть проиграна один раз.
<!DOCTYPE HTML>
<html>
<head>
<style>
.anime {
position: relative;
width: 15px;
height: 15px;
overflow: hidden;
}
.mov {
position: absolute;
top: 0;
left: 15px;
animation: moves 0 infinite;
-webkit-animation: moves 0 infinite;
-moz-animation: moves 0 infinite;
}
.mov:nth-child(1) {animation-delay: 400ms; -moz-animation-delay: 400ms; -webkit-animation-delay: 400ms; z-index: 50;}
.mov:nth-child(2) {animation-delay: 300ms; -moz-animation-delay: 300ms; -webkit-animation-delay: 300ms; z-index: 40;}
.mov:nth-child(3) {animation-delay: 200ms; -moz-animation-delay: 200ms; -webkit-animation-delay: 200ms; z-index: 30;}
.mov:nth-child(4) {animation-delay: 100ms; -moz-animation-delay: 100ms; -webkit-animation-delay: 100ms; z-index: 20;}
@keyframes moves {
to {left: 0}
}
@-moz-keyframes moves {
to {left: 0}
}
@-webkit-keyframes moves {
to {left: 0}
}
</style>
</head>
<body>
<div class="anime">
<img src="im5.gif" class="mov" />
<img src="im4.gif" class="mov" />
<img src="im3.gif" class="mov" />
<img src="im2.gif" class="mov" />
<img src="im1.gif" style="z-index:0" />
</div>
</body>
</html>
|
Поэтому без дополнительного управления JS не обойтись, мне кажется, ну или поищите в сети решение этого, может я и не прав в этом вопросе. | |
| |
|
|
