1

Блок с картинкой, в заданное время сменяется вторым блоком с картинкой и так бесконечно. Это возможно при помощи css и html?

7
  • Да, возможно...
    – Qwertiy
    7 дек 2016 в 8:55
  • Каким образом можете подсказать пожалуйста?
    – Heroin_HP
    7 дек 2016 в 8:56
  • @Qwertiy поправьте меня, если я ошибаюсь, но это возможно для webkit, но не для всех браузеров. 7 дек 2016 в 9:05
  • @Mr.Brightside, caniuse.com/#feat=css-animation - это возможно для всех браузеров, кроме IE9- и полного старья (FF4-, Safari 3, Opera 11-). Даже в 12й Опере работает.
    – Qwertiy
    7 дек 2016 в 9:11
  • @Qwertiy Спасибо, просмотрел =) Действительно всё лучше, чем я думал 7 дек 2016 в 9:21

2 ответа 2

2

html, body, div {
  height: 100%;
  width: 100%;
  margin: 0;
}

html {
  overflow: hidden;
}

body {
  white-space: nowrap;
  animation: slides-10 10s steps(10) infinite;
}

div {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}

@keyframes slides-10 {
  from { transform: translateX(0); }
  to   { transform: translateX(-1000%); }
}
<div style=background:red>
</div><div style=background:green>
</div><div style=background:silver>
</div><div style=background:blue>
</div><div style=background:orange>
</div><div style=background:white>
</div><div style=background:antiquewhite>
</div><div style=background:gray>
</div><div style=background:yellow>
</div><div style=background:margenta>
</div>

1

Например так:

@keyframes slide {
    0%   {left: 0;}
    50%   {left: 0;}
    51% {left: -300px;}
    100% {left: -300px;}
}

/* The element to apply the animation to */
.container {
    width: 300px;
    height: 300px;
    position:relative;
    overflow:hidden;
}
.container .container-wrapper{
  position:absolute;
  width:610px;
  height:300px;
  left:0px;
  animation-name: slide;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.container .container-wrapper div:first-child {
    display:inline-block;
    width: 300px;
    height: 300px;
    background: url('http://blogldc.s3.amazonaws.com/wp-content/uploads/2015/07/2015_07_17_LearnCSS.jpg');
}
.container .container-wrapper div:last-child{
    display:inline-block;
    width: 300px;
    height: 300px;
    background: url('http://cdn.compsmag.com/wp-content/uploads/2015/08/Top-10-best-CSS-development-tools-2015.png');
}

html:

<div class = 'container'>
 <div class = 'container-wrapper'>
  <div></div>
  <div></div>
 </div>
</div>

пример . Касательно поддержки animation в браузерах animation support

3
  • Не кроссбраузерно, кажется. Надо блоки скроллить, а не фон менять.
    – Qwertiy
    7 дек 2016 в 9:14
  • речь о горизонтальной смене блока, а не о смене фона одного блока.
    – Heroin_HP
    7 дек 2016 в 9:20
  • Поправил ответ. Теперь через прокрутку и кроссбраузерно. Спасибо за замечание!
    – Mikl
    7 дек 2016 в 9:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.