WedX - журнал о программировании и компьютерных науках

Сочетание полупрозрачности фонового изображения с анимацией по ключевым кадрам

Я хотел бы добавить непрерывный эффект затухания в фоновом изображении моей оболочки. Я знаю, что вы можете использовать анимацию по ключевым кадрам, чтобы фоновое изображение перемещалось, однако мне было интересно, возможен ли эффект затухания с использованием этой техники.

https://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/

Например:

@-webkit-keyframes fontbulger {
0% {
    font-size: 10px;
}
30% {
    font-size: 15px;
}
100% {
    font-size: 12px;
}

В моей идеальной ситуации было бы что-то вроде...

@-webkit-keyframes fontbulger {
0% {
    background: url(image.png, 1);
}
30% {
    background: url(image.png, 0.5);
}
100% {
    background: url(image.png, 1);
}

... для которого 0,5 будет видимостью 50%. Конечно, это предложение не работает. Любой способ сделать это? Я знаю, что вы можете применить прозрачность к значениям RGB, но я хотел бы применить ее к изображению.

css background transparency
06.05.2012

Ответы:


1

В настоящее время я не знаю, как напрямую повлиять на непрозрачность фонового изображения, которое вы ищете. Два возможных обходных пути:

1. Чистый способ CSS3 (пока плохо поддерживается)

Использование псевдоэлемента для предоставления background-image позволило использовать opacity и сохранить все это как чистый css, но это не сработало на webkit (который, по-видимому, не поддерживает анимацию на псевдоэлементах), только на расширении moz (я не смог протестировать IE10... обратная связь по этому поводу была бы полезна). Сравните Firefox с Chrome для этой скрипты, в которой используется следующий код:

HTML

<div class="bkgAnimate">Foreground text</div>

CSS

.bkgAnimate {
    width: 300px; /*only for demo*/
    height: 200px; /*only for demo*/
    position: relative;
    z-index: 1; /* make a local stacking context */
}

.bkgAnimate:after {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(src="your/image/path/file.png") no-repeat;
    z-index: -1;  
    -webkit-animation: fontbulger  3s infinite;
    -moz-animation:    fontbulger  3s infinite;
    -ms-animation:     fontbulger  3s infinite;
}
@-webkit-keyframes fontbulger {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-moz-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-ms-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}

2. Загроможденное HMTL-решение (более кроссбраузерное)

Изменение фактического тега img в качестве фона казалось единственным способом заставить webkit вести себя, как эта скрипка шоу. Но это может быть нежелательно для вас. Код аналогичен приведенному выше, за исключением:

HTML

<div class="bkgAnimate">Foreground text 
  <img class="bkg" src="your/image/path/file.png"/>
</div>

Изменение CSS сверху

Измените селектор :after на .bkgAnimate .bkg и удалите свойства content и background из этого кода.

07.05.2012
Новые материалы
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
Для любых предложений по сайту: [email protected]