div+css实现晶莹剔透的水珠跟随鼠标移动动画效果代码-html代码-BFW代码库

div+css实现晶莹剔透的水珠跟随鼠标移动动画效果代码

代码语言：html

代码描述：div+css实现晶莹剔透的水珠跟随鼠标移动动画效果代码

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

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

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


  
  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='40px' style='background-color: %2378D6C6;' viewBox='0 0 626 626'%3E%3Ctext x='-370' y='440' fill='%23FFF' font-family='Arial' font-size='320' font-weight='600'%3EBUBBLE%3C/text%3E%3C/svg%3E");
  background-position: center;
  background-size: 100vw auto;
}

.bubble {
  position: relative;
  width: 20rem;
  height: 20rem;
  transform: translate(calc(var(--left) - 50vw), calc(var(--top) - 50vh));
  transition: transform 2s ease-in-out;
  animation: bubble-waving;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.95;
  box-shadow: 2rem 2rem 1rem 1rem rgba(65, 145, 151, 0.3);
  overflow: hidden;
}
@keyframes bubble-waving {
  0%, 100% {
    border-radius: 45% 50% 55% 45%;
  }
  20% {
    border-radius: 50% 50% 55% 50%;
  }
  40% {
    border-radius: 50% 55% 45% 55%;
  }
  60% {
    border-radius: 55% 50% 50% 55%;
  }
  80% {
    border-radius: 45% 55% 50% 50%;
  }
}
.bubble:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='40px' style='background-color: %2378D6C6;' viewBox='0 0 626 626'%3E%3Ctext x='-370' y='440' fill='%23FFF' font-family='Arial' font-size='320' font-weight='600'%3EBUBBLE%3C/text%3E%3C/svg%3E");
  background-position: center;
  background-size: 100vw auto;
  background-position: calc(10rem - var(--left)) calc(10rem - var(--top));
  opacity: 0.8;
  transition: background-position 2s ease-in-out;
  filter: blur(5px);
  animation: mirror;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes mirror {
  0%, 100% {
    transform: scale(-1, -1.2);
  }
  20% {
    transform: scale(-1.2, -1);
  }.........完整代码请登录后点击上方下载按钮下载查看