css+js实现可调节参数的iphone液态玻璃折射效果代码-html代码-BFW代码库

css+js实现可调节参数的iphone液态玻璃折射效果代码

代码语言：html

代码描述：css+js实现可调节参数的iphone液态玻璃折射效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
html {
  background: url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png) center / cover;
  width: 100%;
  height: 100%;
}

  #controls {
    background: #FFF;
    display:inline-flex;
    flex-direction: column;
    font-family:serif;
    padding: 16px;
    margin: -24px 48px 48px;
    width: 384px;
    input[type=range] {
      width: 240px;
    }
  }
</style>


  
  
</head>

<body translate="no">
  <div style="display:flex;font-family:system-ui,sans-serif;font-size:24px;font-weight:600;"><div style="background:#FFF;width:384px;height:192px;padding:16px;margin:48px">
  CSS/SVG Liquid Glass effect
  <p style="font-size:14px;font-weight:400">Use the handle next to the thing to move it around.<br><br>I think this demo is broken in Firefox atm, although the filter itself still works (see to the right of settings).<br><br>Made by Lyra Rebane in like an hour lol<br><br>Feel free to use it ^^</p>
</div>
<div style="background:#000;width:128px;height:192px;padding:16px;margin:48px 0;color:#FFF">black</div><div style="background:#FFF;width:128px;height:192px;padding:16px;margin:48px 0;color:000">white</div><div style="background:linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);width:128px;height:192px;padding:16px;margin:48px 0;color:FFF">colors</div></div>

<div style="display:flex">
<div id="controls">
  <label><input type="range" id="w" value="200" min="10" max="1000">Width</label>
  <label><input type="range" id="h" value="200" min="10" max="1000">Height</label>
  <label><input type="range" id="r" value="25" min="0" max="255">Corner Radius</label>
  <label><input type="range" id="d1" value="17" min="0" max="255">Darkness Opacity</label>
  <label><input type="range" id="d2" value="5" min="0&qu.........完整代码请登录后点击上方下载按钮下载查看