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', cursive;
    font-size: 0.875rem;
    position: absolute;
    top: calc(20vh + 160px);
    left: 50%;
    translate: -150% -50%;
    opacity: 0.6;
    white-space: nowrap;

    svg {
      position: absolute;
      width: 60px;
      bottom: 100%;
      left: 100%;
      rotate: -10deg;
    }
  }

  h1 {
    --font-level: 4;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    img {
      max-width: calc(100vw - 2rem);
      filter: saturate(1.2) contrast(1.1);
    }
  }

  main {
    display: grid;
    place-items: center;
  }

  aside {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.025em;
    margin-block: 20vh;
    font-size: .875rem;
    position: sticky;
    z-index: 9;
    top: 20vh;
    width: 340px;
    display: flex;
    gap: 0.5rem;

    .product-info {
      flex: 1;
      display: grid;
      align-items: center;
      align-content: center;
      gap: 0.125rem;
      font-size: .75rem;
      opacity: 0.7;

      & > span:first-of-type {
        font-weight: 500;
        font-size: 1rem;
      }

      s {
        opacity: 0.5;
      }
    }
    button {
      height: var(--control-size);
      display: flex;
      padding-inline: 1rem;
      backgro.........完整代码请登录后点击上方下载按钮下载查看