div+css实现右下角悬浮表情菜单悬浮弹出子菜单效果代码-html代码-BFW代码库

div+css实现右下角悬浮表情菜单悬浮弹出子菜单效果代码

代码语言：html

代码描述：div+css实现右下角悬浮表情菜单悬浮弹出子菜单效果代码

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

<html lang="en">

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
    <style>

    :root {
      --user-button-circle: rgba(0,0,0,0.025);
      --user-button-cardborder: rgba(255,255,255,0.25);
      --user-button-text:#323133;
      --user-button-shadow:rgba(0,0,0,0.1);
    }
    
    body #user-button {
      z-index: 1000;
      bottom: 1rem !important;
      right: 1rem !important;
      color: var(--user-button-text);
      transition: 1s 0s ease-out;
      -webkit-animation: slide 3s ease-out forwards;
              animation: slide 3s ease-out forwards;
    }
    @-webkit-keyframes slide {
      0%, 50% {
        opacity: 0;
        display: block !important;
      }
      100% {
        opacity: 1;
        display: block !important;
      }
    }
    @keyframes slide {
      0%, 50% {
        opacity: 0;
        display: block !important;
      }
      100% {
        opacity: 1;
        display: block !important;
      }
    }
    body #user-button .u-card {
      border-radius: 100%;
      box-shadow: 0 0 1rem -0.25rem var(--user-button-shadow), inset 0 0 1rem -0.75rem var(--user-button-shadow);
    }
    body #user-button .u-main {
      cursor: pointer;
      --user-button-background:var(--user-button-main, #EC87C0);
    }
    body #user-button .u-main img {
      height: 100%;
      width: 100%;
    }
    body #user-button .u-main iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 4rem;
      height: 4rem;
      opacity: 1;
      transition: 0s 4s;
    }
    body #user-button .u-icons {
      position: relative;
      z-index: 950;
      transform: translate(-50%, -50%);
      background: var(--user-button-circle);
      box-shadow: 0 0 0 0.125rem var(--user-button-cardborder);
      border-radius: 100%;
      transition: 0.25s;
      opacity: 1 !important;
      -webkit-backdrop-filter: blur(10px);
              backdrop-filter: blur(10px);
      /*&:before {
         z-index:-1;
         position:absolute;
         top:0; right:0; bottom:0; left:0;
         content:'';
    
         backdrop-filter: blur(10px);
      }*/
    }
    body #user-button .u-icons a {
      color: inherit;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      text-decoration: none;
    }
    body #user-button .u-icons a div {
      padding: 0.5rem;
      transition: 0s;
    }

    
    body #user-button .u-icons a.show:before {
      opacity: 1;
      transition: 0.25s ease-out;
    }
    body #user-button .u-icons a div {
      color: #1da1f2;
    }
    body #user-button .u-icons a div {
      background: black;
      color: white;
    }
    body #user-button .u-icons a.u-random div {
      position: relative;
      top: -1px;
      -webkit-animation: diespin 2s linear infinite;
              animation: diespin 2s linear infinite;
    }
    @-webkit-keyframes diespin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes diespin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    body #user-button .u-icons a.u-random:not(:hover) div {
      -webkit-animation-play-state: paused;
              animation-play-state: paused;
    }
    body #user-button .u-icons > * {
      position: absolute;
      width: 30px;
      height: 30px;
      background: var(--singlecolour);
      border-radius: 100%;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: 0.25s -0.05s;
    }
    body #user-button .u-icons > *:before {
      position: a.........完整代码请登录后点击上方下载按钮下载查看