css实现鼠标悬浮水波水纹动画效果代码-html代码-BFW代码库

css实现鼠标悬浮水波水纹动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现鼠标悬浮水波水纹动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  font-family: "Niconne", cursive;
  font-size: 6vmin;
  place-items: center;
  height: 100vh;
  perspective: 600px;
  background-color: #4ff59f;
  overflow: hidden;
  --fill-height: 15vmin;
}
body .gal-btn {
  overflow: hidden;
  padding: 7px 0;
}
body .gal-btn .btn__graphic {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  fill: #00c170;
  stroke: #00c170;
  stroke-width: 1px;
}
body .gal-btn .btn__graphic--slide {
  top: 4vmin;
  stroke-width: 4vmin;
  transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
  transition: transform 1.2s ease-in-out;
}
body .gal-btn .sea {
  background: #00c170;
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: height 1.2s ease-in-out;
}
body .gal-btn:hover .sea {
  height: calc(var(--fill-height) + 6px);
}
body .gal-btn:hover .btn__graphic--slide {
  transform: rotatex(30deg) translateZ(var(--fill-height)) translate3d(-66.6%, 0, 0);
}
body .gal-btn .btn-text {
  position: absolute;
  color: black;
  top: 50%;
  left: 50%;
  transition: all 0.8s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: var(--fill-height);
  width: var(--fill-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #4ff59f;
  -webkit-box-shadow: 23px 23px 46px #34a269, -23px -23px 46px #6affd5;
  box-shadow: 23px 23px 46px #34a269, -23px -23px 46px #6affd5;
  min-width: calc(var(--fill-height) * 3);
  min-height: calc(var(--fill-height) * 3);
}
body .gal-btn .btn-text span {
  width: 50%;
  text-align: center;
}
body .gal-btn .btn-text:hover {
  background: #4ff59f;
  -webkit-box-shadow: 29px 29px 44px #34a269, -29px -29px 44px #6affd5;
  box-shad.........完整代码请登录后点击上方下载按钮下载查看