gsap实现可修改边框样式的可拖动悬浮层效果代码-html代码-BFW代码库

gsap实现可修改边框样式的可拖动悬浮层效果代码

代码语言：html

所属分类：拖放

代码描述：gsap实现可修改边框样式的可拖动悬浮层效果代码

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

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

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

  <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
    />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, effect;

@layer effect {
  aside {
    box-shadow:
      0px 0.5px 0.6px hsl(0 0% 0% / 0.06),
      0px 1.8px 2.3px -0.5px hsl(0 0% 0% / 0.07),
      0px 4.2px 5.3px -1.1px hsl(0 0% 0% / 0.09),
      0px 9.7px 12.1px -1.6px hsl(0 0% 0% / 0.1);
    background: linear-gradient(light-dark(hsl(0 0% 98%), hsl(0 0% 12%)) 0 100%) padding-box;
    padding: var(--padding);
    border-radius: var(--border-radius);
    border: calc(var(--border) * 1px) solid light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.2));
    -webkit-backdrop-filter: blur(calc(var(--blur) * 1px)) saturate(var(--saturate, 2.8)) brightness(var(--brightness, 1.25)) contrast(var(--contrast, 1));
            backdrop-filter: blur(calc(var(--blur) * 1px)) saturate(var(--saturate, 2.8)) brightness(var(--brightness, 1.25)) contrast(var(--contrast, 1));
  }
  [data-disable='true'] aside {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

@layer demo {
  :root {
    --control-size: 52px;
    --padding: .5rem;
    --border-radius: 16px;
  }

  .arrow {
    font-family: 'Gloria Hallelujah', .........完整代码请登录后点击上方下载按钮下载查看