Question

我用Wordpress创建了一个站点，并使用插件Hustle创建了弹出窗口。我希望在关闭弹出窗口时淡出灰色背景（蒙版）。

这是我的代码，可以使背景遮罩淡入：

.wph-modal-mask.wpmudev-modal-mask  {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
animation: fadein 2s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

如果您访问我的网站 http://michael-helmbrecht.de/main/ 如果您单击投资组合中的第一张图片，则会看到弹出窗口。

Answer 1

Heloo Michael

您可以像设置淡入淡出一样将动画设置为淡出背景，唯一的区别是您可以互换from和to的不透明度值像下面一样

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-moz-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

指定关键帧后，您可以将其应用于将像这样淡出的html元素上的类

.wph-modal-mask.fadeout-modal-mask  {
  -webkit-animation: fadeout 2s;
  -moz-animation: fadeout 2s;
   animation: fadeout 2s;
}

淡出弹出窗口的背景

1 个答案: