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".........完整代码请登录后点击上方下载按钮下载查看