Как сделать анимацию заполнения png цветом при загрузке страницы

Тема в разделе "Верстка", создана пользователем silmarion, 19 дек 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Доброго всем дня, в шапке на сайте есть 2 элемента в PNG с прозрачным фоном, как можно сделать на css, чтобы при обновлении страницы они анимированно заливались цветом по горизонтали.
    Т.е. сначала ничего, затем в течение 3-5 сек заливает из цветом.
     
  2. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    216
    Симпатии:
    333
    инвертировать прозрачность, фон залить цветом, использовать transition
     
  3. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    328
    Симпатии:
    108
    не совсем понял каким должен быть результат. вы бы картинки с "до" и "после" выложили.
    вам в этом поможет overflow: hidden;. прячите блок с бэкграундом за границами элемента и постепенно выдвигаете слева на право (или наоборот) при помощи @keyframes
     
    Последнее редактирование: 19 дек 2014
  4. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    А можно какой то пример?
    Просто получается сам див должен заливаться фоном к примеру слева направо, и внутри этого дива есть еще крутящиеся элементы.

    И если его выдвинуть из за блока, который его будет закрывать, то блок должен быть как минимум такого же размера что и блок, который выдвигается?
     
    Последнее редактирование: 19 дек 2014
  5. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    328
    Симпатии:
    108
    вот вам пример:
    Код:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            @-webkit-keyframes my{
                from{left: -200px;}
                to{left: 0;}
            }
            .container{
                overflow: hidden;
                position: relative;
                height: 100px;
                width: 200px;
                margin: auto;
                border: 1px solid #000;
            }
    
            .container:after{
                content: "";
                background: red;
                position: absolute;
                top: 0;
                height: 100px;
                width: 200px;
                z-index: 1;
                -webkit-animation: my 3s linear;
            }
    
            .block{
                height: 100px;
                width: 200px;
                position: absolute;
                top: 0;
                z-index: 2;
                text-align: center;
                line-height: 100px;
            }
            </style>
    </head>
    <body>
        <div class="container">
            <div class="block">blablabla</div>
        </div>
    </body>
    </html>
    набросал на скорую руку, поэтому код нуждается в оптимизации!
    здесь .block - ваш png
    .container:after - ваш бэкграунд
    блоки не обязательно должны быть одного размера, можно и разного.

    UPD: Можно так же сделать изменением ширины бэкграунда, не обязательно выдвиганием блока. Всё зависит от того, какой именно вы хотите сделать бэкграунд
    Код:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            @-webkit-keyframes my{
                from{width: 0;}
                to{width: 200px;}
            }
            .container{
                position: relative;
                height: 100px;
                width: 200px;
                z-index: 1;
                margin: auto;
                border: 1px solid #000;
            }
    
           .container:after{
                content: "";
                background: red;
                position: absolute;
                top: 0;
                height: 100px;
                width: 200px;
                z-index: 1;
                -webkit-animation: my 3s linear;
            }
    
            .block{
                height: 100px;
                width: 200px;
                position: absolute;
                top: 0;
                z-index: 2;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="block">blablabla</div>
        </div>
    </body>
    </html>
     
    Последнее редактирование: 19 дек 2014
  6. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Так, тут видимо что-то не до конца, потому что код вообще не работает

    Ага понял почему, код только для вебкитов
     
  7. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    328
    Симпатии:
    108
    говорю же, нуждается в оптимизации. она включает в себя префиксы :)

    UPD: Вы хоть скажите то, или не то. А то тыкал пальцем в небо, когда предлагал вариант.
     
    Последнее редактирование: 19 дек 2014
  8. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Да, чтото вроде, но наоборот получается

    В общем как то так
    Код:
      <div>
      <div style="background: url(images/h-l.png) top center!important;width:490px;height:100px;float:left}"></div>
      <div style="background: url(images/h-r.png) top center!important;width:490px;height:100px;float:left}"></div>
       
      <div style="background: url(images/f-l.png) top center!important;width:490px;height:100px;float:left}"></div>
      <div style="background: url(images/f-r.png) top center!important;width:490px;height:100px;float:left}"></div>
      </div>
    
    Хедер и футер из 2 частей, левой и правой
    нужно сделать 4 черных картинки, и получается одновременно уменьшать их по ширине до 0
    1 2
    3 4

    1 - влево от 490 до 0
    2 - вправо от 490 до 0
    3 - влево от 490 до 0
    4 - вправо от 490 до 0

    Как то так, а то я менял размеры и направление в твоем примере, он вроде отрисовывает как надо а в конце снова становится своего размера.
     
  9. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    328
    Симпатии:
    108
    Буду основываться на своём примере:
    вы видимо у .container:after удалили width (я так понял, что вы используете пример 2), поэтому когда анимация заканчивается, width становится равным 0.
    Этим я хочу сказать, что анимируемому блоку нужно задавать стили, которые будут после окончания анимации.
     
    Последнее редактирование: 19 дек 2014
  10. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Мне получается нужно не заполнять див градиентом, а наоборот, убирать заполнение, как это изменить?
    Код:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
      body{background:#000}
      @-webkit-keyframes my{  from{right: 0px;}  to{right: 642px;}  }
      .container{
      overflow: hidden;
      position: relative;
      height: 110px;
      width: 642px;
      margin: auto;
      border: 1px solid #000;
      background:none
      }
    
      .container:after{
      content: "";
      background: #000;
      position: absolute;
      top: 0;
      height:110px;
      width: 642px;
      z-index: 2;
      -webkit-animation: my 1s linear;
      animation: my 1s linear;
      
    
      }
    
      .block{
      height: 110px;
      width: 642px;
      position: absolute;
      top: 0;
      z-index: 2;
      text-align: center;
      line-height: 110px;
      background: url(images/h-l.png) top center!important;}
      }
      </style>
    </head>
    <body>
    <div style="width:980px;margin:0 auto">
      <div class="container">
      <div class="block">blablabla</div>
      </div>
      <div>
      <div style="background: url(images/h-l.png) top center!important;width:490px;height:100px;float:left}"></div>
      <div style="background: url(images/h-r.png) top center!important;width:490px;height:100px;float:left}"></div>
      
      <div style="background: url(images/f-l.png) top center!important;width:490px;height:100px;float:left}"></div>
      <div style="background: url(images/f-r.png) top center!important;width:490px;height:100px;float:left}"></div>
      </div>
    </body>
    </html>
    
    Сначала прорисовывет как надо, затем в конце снова черный блок
    как сделать чтобы когда отрисовка черного фона с 100% до 0% прошла все осталось как есть без черного?
     
    Последнее редактирование: 19 дек 2014
Статус темы:
Закрыта.