gsap+svg实现可拖拽透光液态玻璃材质按钮代码-html代码-BFW代码库

gsap+svg实现可拖拽透光液态玻璃材质按钮代码

代码语言：html

所属分类：拖放

代码描述：gsap+svg实现可拖拽透光液态玻璃材质按钮代码

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

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

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

  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

@layer normalize, base, demo;

@layer demo {
  :root {
    --content-width: 720px;
    scrollbar-color: canvasText #0000;
  }

  section p {
    line-height: 1.5;
  }

  .arrow {
    display: inline-block;
    opacity: 0.8;
    position: absolute;
    font-size: 0.875rem;
    font-family: 'Gloria Hallelujah', cursive;
    transition: opacity 0.26s ease-out;

    &.arrow--debug {
      top: 140px;
      left: 30%;
      translate: -100% 0;
      width: 80px;
      span {
        display: inline-block;
        rotate: -24deg;
        translate: 0 100%;
      }
      svg {
        rotate: 20deg;
        /* bottom: 130%; */
        translate: 80% -80%;
        rotate: -25deg;
        left: 0%;
        width: 100%;
      }
    }
  }
  .filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  :is(header, main) {
    width: var(--content-width);
    max-width: calc(100vw - 2rem);
    margin: 0 auto;
  }

  section {
    margin-block: 4rem;
  }

  .images {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    img {
      width: 300px;
    }
  }

  footer {
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.7;
  }

  header {
    margin-block: 4rem;
  }

  header p {
    --font-level: 2;
    text-wrap: balance;
    color: color-mix(in oklch, canvasText, canvas 35%);
  }

  main {
    flex: 1;

    img {
      border-radius: 12px;
    }
  }

  .apps {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    gap: 1rem;
  }

  .app {
    width: 80px;
    font-size: 0.875rem;
    font-weight: 300;
    span {
      display: block;
      text-align: center;
      white-space: nowrap;
    }
    img {
      width: 100%;
    }
  }

  .nav-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  [data-mode='dock'] .effect nav {
    opacity: 1;
  }

  [data-mode='dock'] .effect {
    -webkit-backdrop-filter: url(#filter) blur(calc(var(--output-blur) * 0.1px))
      brightness(1.1) saturate(1.5);
            backdrop-filter: url(#filter) blur(calc(var(--output-blur) * 0.1px))
      brightness(1.1) saturate(1.5);
  }
.........完整代码请登录后点击上方下载按钮下载查看