Работа с эффектом скольжения ключевого кадра css3, но не могу понять, как правильно настроить .. Fiddle в комплекте

0

Идея состоит в том, чтобы иметь отзывчивую версию этой скрипки (см. Ниже), которая на 100% шире и имеет высоту 500 пикселей... Если я отрегулирую ширину этого до 100%, это испортится по окончании анимации. Как мне сделать такую простую анимацию, которая будет работать с перекрестным браузером, иметь ширину 100%, отображаться плавно и настраиваемая высота с помощью медиа-запросов (я могу выполнить часть запросов).

мой код: http://jsfiddle.net/hkJsm/ html

 <div id="logo"></div>

CSS

@-webkit-keyframes slide {
from{
    background-position:575px;
}
to{
    background-position:1725px;
}
}

#logo{
text-align:center;
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
 }

Спасибо за помощь

Теги:
responsive-design

2 ответа

0
Лучший ответ

Ваша проблема интересна, поэтому я понял, что изображение нужно обрезать, потому что в CSS3 вы не можете вручную переворачивать изображения, поэтому я его отредактировал. Она работает в этой скрипке, и была установлена путем редактирования этого изображения для этого, и изменить свойство фон положения немного дальше в анимации:

background-position:1725px;

в

background-position:1645px;

Преобразования изображений показаны ниже.

Это изображение Изображение 174551

К этому Изображение 174551

Поделиться
  • 0
    Мне нужно, чтобы оно было плавным. Становится шокирующим, когда ты его растягиваешь. откройте свою скрипку, растяните ее так, чтобы логотип был как можно больше, и обратите внимание, как часто он защелкивается ... есть идеи?
  • 0
    @ user3145782 Да, просто отредактируйте эту часть изображения или измените место, где изображение начинает свою анимацию.
Показать ещё 4 комментария
0

Вот что вы можете сделать:

Скрипт: http://jsfiddle.net/hkJsm/1/

CSS

 .outer{
     background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
     -webkit-animation: slide 10s linear infinite;

 }
 #logo{
     min-height: 80px;
 }

HTML

  <div class="outer"><div id="logo"> </div></div>
Поделиться
  • 0
    это работает, но это не бесшовно, когда я растягиваю его ... мне просто нужно использовать фотографию, которая говорит 4000px в ширину? таким образом он продолжает идти и не обрезается, как этот, когда он растягивается?
  • 0
    Или вы можете сделать width: 100%; и дать min-width логотипу
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню