磨砂玻璃效果。背后的动画元素

Question

我希望显示磨砂玻璃后面的动画元素。有人知道这种方法吗？

在示例对话框的背景中包含静态图像。但是我想要透明效果加上磨砂玻璃效果。有可能吗？

至少有可以使用这种功能的网站示例

const wrapper = document.getElementById('wrapper');

const config = [{
    attrs: {
      src: 'https://lh3.googleusercontent.com/PfeCuzNciFB224xl-gslHU3xa8gyzlXMkTiZb1umJbZCjd3XLighRsSPgdG08glqpfPvnEH8HvTKrhDhZ1TNSO9unweH_m4xVzGcTD7vg9OlYDUDeMk42cuAt8qxRtpQqiZCxZzU-TtsdDNXutDaF6qsZLMeUCJGmUP3vwJRex1slQkQh7bfZogkRWBrTWQYWP6VBV7oZUUOaRDNhIv25UBQfNZ9P_1FynOz3k9hhi7ESaGep5z2PS3uBxdUAAAvKXC5UJz7sfaCCf7TbLV8vif0Qd8FpWtMLB5WgY69pvcIpi5QCPnOjNoGo56ltWTpNepBePFj1NH3hYkicbHENKi1l8H4wiITnuOFOLOq1WHQJcJYfj4dPTjRRJ8HeFMdGnPxoyv4dL1YfmGpHEgkdJgZFa0ySgq2qdxkpfHEhPbYXBgCUkc-Ataaii0neDfcHmY6c5zo3PzLuzu_SIhADFckV48jvBlcvnbqoltL1OJOAUs9DK7R4DueEAtAn_SSrw0q4w8_O8gTTymHCU8injwQdyuV7viJxzjTtufw57yoIQaUKTk6l8sefs1GoTneb7hEwWEEmniLix13Emo4gsm8yCPQayKohNgdQ-b2966AhhZFgCUkcKRccvZ6ExF1MfE6sfRbWXV4-uX5s2J7HeXU_9EBMMV1D-Tgg0YSdfs30kIuMcEgl6uYv53MxWGUKxQf8IYohHUr5pasZm_4H0Ai=w300'
    },
    style: {
      width: '400px',
      'border-radius': '2px'
    }
  },
  {
    attrs: {
      src: 'https://lh3.googleusercontent.com/Zr48yklTtCBayDVNhsGDD2JKwZ88ggUkfjd_PMYq_6GWZqBvV11rIbE6ucFHR4WIfL61fnoPmJcfUFJDvVbO8m3AzwfNC8fGb8JrtdLctzGJ67_wDuc0GRZVSHHg3iqQ3ok5aYCliK8Hf2Izbz7DLtqUND_Pqx1xfU3o5lekigYg-q2S78WfcWRlTp5c6khKbrnIfwqlb46cvaje66LNI_hFiiCJhwPXYt00EvBeLjh1WV6Cn1rX2dw3a1TkDwQfbS7XY7Lbkea46lkt4EPDz3IHnUbGT97fIyYjhtKqNu0O3h74VJk4bn1Rq5E7lrEyhXL2TzepItfnuwN2LwgVNC7KYLmUQHCGtF--Xp0Ce8Bop0rFZ1akpPzLH9PzPEAh0YnsiHg5CZ68US2zK8TGer29_WghBM8kpjiNjVpGddX0wBg4Rda1k2nbnRioapKTgg9V5PalEOe6PVVUO9jiya3gXISg27UywWpS0CKNWF30q7lkyJPl0WePDjOjT6FBql3SPtziQz3v9QY6E__ZqhUBhXTyeKrR0az5yMlOyHZ7WReoiiLyPZ-6rpHNcUWNhOEcIfeJKhjXrVja6KqVFO8eDJ6nGt7hvjUbppcDjneVzxFC_hipOGfMYxFaIsMpjNwEUJs3JMTfdlkt6PFMuRphDqDSJCAeATKJx_GMSOW7BBaRCjRHYx1ZXzl2x76zKL4tXbdqqJcBsMThp0nFdFJi=w400'
    },
    style: {
      width: '200px'
    }
  },
  {
    attrs: {
      src: 'https://lh3.googleusercontent.com/Q-UzxQg0vqrlcr6vsCExvS241BKBA6k2wHoLyKDARabODr_yEerrSEcCAidMvpIe3YIiVqYjMFDZQpCb3V3cN-YiopbyH9lB9a0ETQdyCit8Bqhn1zD14j20Z-sSbI1injRcqa3BrfjcMuKeTr6wXtT0-8XgVgWIhhO6SM-sK81ithZYCMrWa8id0cIU9-_G_i1rd-fLnUwYMV9JwXW-XknNFE0I1sma4oDzBKAshLLHDabUrn8eOtQJ30TmIxLB_ho2x6fF45C4a9cD5yvzuNTxwKm2Trq0fJpOvIogmnFbp02AGNAlxr9pVHz6wv8HbCiq5PbjEcKvDGKa-2iy6HgehXDGYoyJ9NQeiWJXD30rfeymWaPdGQgy_u8M5va6NpJq-kMhDvqw8xlNir74lnfHngaOZwQzeY_0rw5oz8LAi4qaMr7tOiDPzy5gSwN3gNWiRwW0nRGS-FM18uSMOpLES39tDvxRUsyEM6-PTjjV38SS-0aQ3GlKcCAq9Nv778QRgPuwjkim9FWBsbcVGblj98mDEwPMu4Tut1pyfrSEcxaOct5I0Qg_YmUg1cjYBzJNMZ9rZ6QiLB5wPIPf1vioXoTl0ehymK5c8L4lDXFAUZTGMc00bnRcoq_hBPzgM2i5h29mD5StnTfGz7MwcfBa5S-aXUR0=w400'
    },
    style: {
      width: '300px'
    }
  },

];

const moodboard = new Moodboard.Moodboard(
  wrapper,
  config,
  2000
);

moodboard.init();
moodboard.move();

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: sans-serif;
}

#wrapper {
  width: 100%;
  height: 100%;
  overflow: none;
  background-image: url(https://lh3.googleusercontent.com/lVc_VRmD33vLgfoSwcX0xR9fxkBDFHDzAiId6Pu-RntATvAUrkshRd1T6--dw5CpdMiqJTsFsmd0voUwlwAXTxFrjVFOzDSWU1HDdHZ1fzzZGg5xm6A3gxso9-vilpmOQrohakikRYhKyiGu6UAvjgy8VUlRft2J2FceqV-JmygBx3AB_Oiq1kyRuKByFQoQl9EUF8i43UFawVXxSXQD-RoTmAtzVH2U6od6OTZsH5rmSMmLD4y_E8aNhoGWWgWA5_YjHUNDCechn0kZj3tyeu1EuDBMn2L0V7Rd_1-TUkHBw-XvJLLa6dxLWbSVR5gPMZ2dD5ZrW-fUQu6P9txHb5rq5uqILZymrSjHyKwCa3R8_oWUwzNk40FmAIcJ-Gie-5uf5lNWYvYZ3vLgomcBsrzFQO0_FldQKhpYSVP4uzwd_Adlo5b7I6c0akbQh_VPHPBS9-wW614ii-TtJoDtC5o2Oyxfm_2AOs39Dgdqq9irL9nWe08AB_S5haV8Pghh5QMt0-IoI-jngC-CS70PvFuvIReEM7bQg8Qvf8JKUPnRWtz7jAhzSe3pXoad8xRmCOREUIMr2lgEBwaseMA6NeMVytxMNBHrm08nojfZ5fTlsh-cVzD2UQmikSWoakCh7PrUgSHNankdPJGURESoZ6em9cc1GGEE7drRFOKakgKPVeZAKB6vzfXWhSuLOYS3hm275oyrsJNyKrrhGRh5Z2azsg=w949-h632-no);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

#dialog {
  background: inherit;
  width: 40%;
  height: 40%;
  position: absolute;
  top: 30%;
  left: 30%;
  overflow: hidden;
  z-index: 1;
}

#dialog:before {
  content: ' ';
  background: inherit;
  position: absolute;
  left: -25px;
  right: -25px;
  top: -25px;
  bottom: -25px;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}

#dialog__content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

<script src="https://unpkg.com/animate-moodboard@latest/lib/index.js"></script>
<div id="wrapper">
  <div id="dialog">
    <div id="dialog__content">
      Something dialog
    </div>
  </div>
</div>