svg+css实现液态水滴文字融合交互效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现液态水滴文字融合交互效果代码

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope");

:root {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

@keyframes bg-move {
  from { background-position-y: bottom; }
  to   { background-position-y: 70%; }
}

body {
  background: rgb(2, 6, 23);
  height: 100svh;
  display: grid;
  place-items: center;    
  place-content: center;
  
  color:white;
  font-family: "Manrope", sans-serif;
  
  background-image: url('//repo.bfw.wiki/bfwrepo/image/5e965addb956a.png'); 
/*   background-image: url('https://images.unsplash.com/photo-1745986143057-e611033e37e8');  */

  background-size: cover;
  background-position: bottom;

  animation: bg-move 20s ease-in-out infinite alternate;
  
  overflow: hidden;
  
  grid-template-area: "stack";
  
  > * {
    grid-area: stack;
  }
  
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-decoration: none;
  font-weight: normal;
  outline: none;
  text-align: center;
  font-size: 1.7em;
  line-height: 6em;
  min-width: 1em;
}

nav{
  width: 100%;
  position: relative;    
  font-size: 1.5rem;
  padding: .5em;
  
  resize: horizontal;
  overflow: hidden;  
  
/*   body:not(:hover) & {
    transition: .5s;
    width: 100% !important;
  } */
  
  &.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    
    /* 
    | Converts background to 7bit colors 
    | (128 levels for each channel)
    */
    backdrop-filter: url(#pack-upper);
  }
  
  &.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    
    /* variations <3 */
    backdrop-filter: url(#glass);
    backdrop-filter: url(#liquid-glass);
    backdrop-filter: url(#liquid-glass-new);
    backdrop-filter: 
      url(#liquid-glass-new) 
      url(#fresnel)
      drop-shadow(0 0 10px #0003)
    ;
  }

  &::-webkit-resizer {
      background: #fff;
      border-radius: 99em;
      box-shadow: 0 0 20px 1px #fff;
      outline: 20px solid transparent;
      pointer-events: all;
  }
}

.icons {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;  
  
  filter: url(#round);  
  filter: url(#pack-lower);  
  filter: url(#round) url(#pack-lower);  
  
  /* correct channel addition blend mode */
  mix-blend-mode: plus-lighter;
}

.icon {
  pointer-events: all;
  width: 3em;
  aspect-ratio: 1;  

  transition: 1s;
  border-radius: 0em;
  border-radius: 1em;
  border-radius: 1.5em;

  background: #fff;
  
  /* color: black; */
  
  padding: .85em;
  
  /* to make it kinda morph*/
  margin: -0.2em;
  
  cursor: pointer;
  overflow: visible;
  
  transition: 
    scale 1s linear(0, 0.038 1.6%, 0.154 3.4%, 1.026 12.6%, 1.166 15.2%, 1.234 18%, 1.221 21.6%, 1.005 31.2%, 0.944 37%, 1.013 56%, 1)
/*     , border-radius .3s ease-in-out */
  ;
  
  will-change: transform;
  
  nav:has(&:active) &:hover {
    transition-timing-function: ease-out;
    transition-duration: 130ms;
    scale: .75;
  }
}

body > svg{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
</style>

  
</head>

<body translate="no">


<h1 contenteditable spellcheck="false">Bfw.wiki.</h1>
<nav class="glass">
  <div class="icons">
    <svg class="icon">
      <use href="#home"></use>
    </svg>
    <svg class="icon">
      <use href="#store"></use>
    </svg>
    <svg class="icon">
      <use href="#camera"></use>
    </svg>
    <svg class="icon">
      <use href="#search"></use>
    </svg>
  </div>
</nav>

<!-- ✴️ lucide icons <3 -->
<svg>
  <symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search">
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
  </symbol>

  <symbol id="camera" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera">
    <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
    <circle cx="12" cy="13" r="3"></circle>
  </symbol>

  <symbol id="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-home">
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
    <polyline points="9 22 9 12 15 12 15 22"></polyline>
  </symbol>

  <symbol id="store" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-store">
    <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"></path>
    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
    <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"></path>
    <path d="M2 7h20"></path>
    <path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"></path>
  </symbol>
</svg>

<!-- Utilities -->
<svg color-interpolation-filters="sRGB">
  <filter id="round">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
    <feComponentTransfer result="threshold">
      <feFuncA type="gamma" amplitude="80" exponent="10" offset="-2"></feFuncA>
    </feComponentTransfer>
    <feComposite in="SourceGraphic" operator="atop"></feComposite>
  </filter>
</svg>

<!-- 
| 7:1 bit packing 
| https://codepen.io/Cubiq/pen/yyYYRzP
-->
<svg width="0" height="0" color-interpolation-filters="sRGB">
  <!-- Pack Lower Channel -->
  <filter id="pack-lower">
    <feColorMatrix type="matrix" id="pack-lower-matrix" values="
              0.00392156862745098 0 0 0 0
              0 0.00392156862745098 0 0 0
              0 0 0.00392156862745098 0 0
              0 0 0 1 0
          "></feColorMatrix>
  </filter>

  <!-- Pack Upper Channel -->
  <filter id="pack-upper">
    <feColorMatrix type="matrix" id="pack-upper-quantize" result="quantized" values="
              0.4980392156862745 0 0 0 0
              0 0.4980392156862745 0 0 0
              0 0 0.4980392156862745 0 0
              0 0 0 1 0
          "></feColorMatrix>
    <feComposite in="quantized" operator="over" result="composited"></feComposite>
    <feColorMatrix in="composited" type="matrix" id="pack-upper-shift" values="
              2 0 0 0 0
              0 2 0 0 0
              0 0 2 0 0
              0 0 0 1 0
          "></feColorMatrix>
  </filter>

  <!-- Unpack Lower Channel -->
  <filter id="unpack-lower">
    <feComponentTransfer>
      <feFuncR type="discrete" id="unpack-lower-r" tableValues="0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0.000 1.000 0..........完整代码请登录后点击上方下载按钮下载查看