css+svg实现重力感应悬浮图标按钮效果代码-html代码-BFW代码库

css+svg实现重力感应悬浮图标按钮效果代码

代码语言：html

所属分类：悬停

代码描述：css+svg实现重力感应悬浮图标按钮效果代码

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

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

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

  
  
  
<style>
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: flex;
  place-items: center;
  justify-content: center;
}

.gravityButton {
  display: grid;
  place-items: center;
  width: 192px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.gravityButton > button {
  font: inherit;
  width: 64px;
  aspect-ratio: 1;
  background: none;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(var(--tx, 0), var(--ty, 0));
  opacity: var(--opacity, 0.25);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.gravityButton > button:hover, .gravityButton > button:focus-visible {
  --_fill: var(--color, #fff);
}
.gravityButton > button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

.buttonIcon {
  width: 50%;
  fill: var(--_fill, #fff);
  transition: fill 0.3s;
}
</style>

  
  
</head>

<body >
  <div class="gravityButton">
  <button style="--color: hotpink;">
    <svg class="buttonIcon" viewBox="0 0 512 512" title="bath">
      <path d="M32,384a95.4,95.4,0,0,0,32,71.09V496a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V480H384v16a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V455.09A95.4,95.4,0,0,0,480,384V336H32ZM496,256H80V69.25a21.26,21.26,0,0,1,36.28-15l19.27,19.26c-13.13,29.88-7.61,59.11,8.62,79.73l-.17.17A16,16,0,0,0,144,176l11.31,11.31a16,16,0,0,0,22.63,0L283.31,81.94a16,16,0,0,0,0-22.63L272,48a16,16,0,0,0-22.62,0l-.17.17c-20.62-16.23-49.83-21.75-79.73-8.62L150.22,20.28A69.25,69.25,0,0,0,32,69.25V256H16A16,16,0,0,0,0,272v16a16,16,0,0,0,16,16H496a16,16,0,0,0,16-16V272A16,16,0,0,0,496,256Z" />
    </svg>
  </button>
</div>

<div class="gravityButton">
  <button style="--color: aquamarine;">
    <svg class="buttonIcon" viewBox="0 0 512 512" title="poo">
      <path d="M451.4 369.1C468.7 356 480 335.4 480 312c0-39.8-32.2-72-72-72h-14.1c13.4-11.7 22.1-28.8 22.1-48 0-35.3-28.7-64-64-64h-5.9c3.6-10.1 5.9-20.7 5.9-32 0-53-43-96-96-96-5.2 0-10.2.7-15.1 1.5C250.3 14.6 256 30.6 256 48c0 44.2-35.8 80-80 80h-16c-35.3 0-64 28.7-6.........完整代码请登录后点击上方下载按钮下载查看