guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html>

<head>
  <style>
    /* 父容器基础样式 */
    .bottom-panel {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30vh;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);

      /* 隐藏状态 */
      opacity: 0;
      visibility: hidden;

      /* 过渡动画 */
      transition: all 0.3s ease-in-out;

      /* Flex布局设置 */
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    /* 激活状态 */
    .bottom-panel.active {
      opacity: 1;
      visibility: visible;
    }

    /* 子元素样式 */
    .panel-item {
      width: 80%;
      height: 20%;
      min-height: 50px;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 12px;
      transition: transform 0.2s;

      /* 内容居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Arial;
    }

    /* 交互效果 */
    .panel-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 触发按钮样式 */
    .trigger-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 12px 24px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .trigger-btn:hover {
      background: #0056b3;
      transform: scale(1.05);
    }
  </style>
</head>

<body>
  <!-- 触发按钮 -->
  <button class="trigger-btn">显示面板</button>

  <!-- 底部面板 -->
  <div class="bottom-panel">
    <div class="panel-item">内容区块 1</div>
    <div class="panel-item">内容区块 2</div>
    <div class="panel-item">内容区块 3</div>
  </div>

  <script>
    // 获取DOM元素
    const panel = document.querySelector('.bottom-panel');
    const triggerBtn = document.querySelector('.trigger-btn');

    // 点击触发按钮
    triggerBtn.addEventListener('click', () => {
      panel.classList.toggle('active');

      // 更新按钮文字
      const isActive = panel.classList.contains('active');
      triggerBtn.textContent = isActive ? '隐藏面板' : '显示面板';
    });

    // 点击面板外部关闭（可选）
    document.addEventListener('click', (e) => {
      if (!panel.contains(e.target) && e.target !== triggerBtn) {
        panel.classList.remove('active');
        triggerBtn.textContent = '显示面板';
      }
    });
  </script>
</body>

</html>