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