【好看的CSS动画分享】悬浮球菜单CSS

以下是一个简单的悬浮球菜单CSS动画示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮球菜单CSS动画</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
 
  .menu-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #555;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
 
  .menu-button:hover {
    box-shadow: 0 0 0 3px #000;
  }
 
  .menu {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 200px;
    background-color: #333;
    border-radius: 50px 50px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
 
  .menu-button.active ~ .menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
 
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: #555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
  }
 
  .menu-item:hover {
    transform: scale(1.1);
  }
 
  .menu-item:not(:last-child) {
    margin-bottom: 10px;
  }
</style>
</head>
<body>
 
<div class="menu-button"></div>
<div class="menu">
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
  <div class="menu-item"><span style="font-size:20px;">☰</span></div>
</div>
 
<script>
  const menuButton = document.querySelector('.menu-button');
  const menu = document.querySelector('.menu');
 
  menuButton.addEventListener('click', () => {
    menuButton.classList.toggle('active');
  });
</script>
 
</body>
</html>

这段代码创建了一个悬浮球菜单，当点击悬浮球时，会展开显示三个带有三个图标的菜单项，悬浮球菜单可以通过CSS过渡动画显示或隐藏。这个示例简单易懂，适合作为初学者学习CSS动画的入门项目。

【好看的CSS动画分享】悬浮球菜单CSS

评论已关闭

推荐阅读