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

Статус
В этой теме нельзя размещать новые ответы.
silmarion

silmarion

Полезный
Регистрация
21 Июн 2012
Сообщения
194
Реакции
19
Доброго всем дня, в шапке на сайте есть 2 элемента в PNG с прозрачным фоном, как можно сделать на css, чтобы при обновлении страницы они анимированно заливались цветом по горизонтали.
Т.е. сначала ничего, затем в течение 3-5 сек заливает из цветом.
 
инвертировать прозрачность, фон залить цветом, использовать transition
 
не совсем понял каким должен быть результат. вы бы картинки с "до" и "после" выложили.
анимированно заливались цветом по горизонтали.
Нажмите для раскрытия...
вам в этом поможет overflow: hidden;. прячите блок с бэкграундом за границами элемента и постепенно выдвигаете слева на право (или наоборот) при помощи @keyframes
 
Последнее редактирование:
NikroVir написал(а):
не совсем понял каким должен быть результат. вы бы картинки с "до" и "после" выложили.

вам в этом поможет overflow: hidden;. прячите блок с бэкграундом за границами элемента и постепенно выдвигаете слева на право (или наоборот) при помощи @keyframes
Нажмите для раскрытия...
А можно какой то пример?
Просто получается сам див должен заливаться фоном к примеру слева направо, и внутри этого дива есть еще крутящиеся элементы.

И если его выдвинуть из за блока, который его будет закрывать, то блок должен быть как минимум такого же размера что и блок, который выдвигается?
 
Последнее редактирование:
silmarion написал(а):
А можно какой то пример?
Просто получается сам див должен заливаться фоном к примеру слева направо, и внутри этого дива есть еще крутящиеся элементы.
Нажмите для раскрытия...
вот вам пример:
Код: 
<!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>
 
Последнее редактирование:
NikroVir написал(а):
вот вам пример:
Код: 
<!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>
Нажмите для раскрытия...
Так, тут видимо что-то не до конца, потому что код вообще не работает

Ага понял почему, код только для вебкитов
 
silmarion написал(а):
Так, тут видимо что-то не до конца, потому что код вообще не работает
Ага понял почему, код только для вебкитов
Нажмите для раскрытия...
говорю же, нуждается в оптимизации. она включает в себя префиксы :)

UPD: Вы хоть скажите то, или не то. А то тыкал пальцем в небо, когда предлагал вариант.
 
Последнее редактирование:
Да, чтото вроде, но наоборот получается

В общем как то так
Код: 
  <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

Как то так, а то я менял размеры и направление в твоем примере, он вроде отрисовывает как надо а в конце снова становится своего размера.
 
silmarion написал(а):
а в конце снова становится своего размера.
Нажмите для раскрытия...
Буду основываться на своём примере:
вы видимо у .container:after удалили width (я так понял, что вы используете пример 2), поэтому когда анимация заканчивается, width становится равным 0.
Этим я хочу сказать, что анимируемому блоку нужно задавать стили, которые будут после окончания анимации.
 
Последнее редактирование:
NikroVir написал(а):
Буду основываться на своём примере:
вы видимо у .container:after удалили width (я так понял, что вы используете пример 2), поэтому когда анимация заканчивается, width становится равным 0.
Этим я хочу сказать, что анимируемому блоку нужно задавать стили, которые будут после окончания анимации.
Нажмите для раскрытия...

Мне получается нужно не заполнять див градиентом, а наоборот, убирать заполнение, как это изменить?
Код: 
<!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% прошла все осталось как есть без черного?
 
Последнее редактирование:
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху