详情
评论
问答

子比主题增加仿mac三个点子比美化

子比主题仿Mac窗口控制点

为您的网站添加精美的Mac风格窗口控制按钮,提升用户体验和界面美观度

 
 

功能说明

这些仿Mac窗口控制点不仅具有美观的视觉效果,还包含实用的功能提示和交互效果。当用户悬停在控制点上时,会显示功能提示,点击时会有动画反馈。

您可以将这些控制点集成到子比主题的弹窗、模块或任何需要窗口控制的元素中,为用户提供一致且直观的操作体验。

实现代码

/* HTML代码 */

<div class=”mac-dots”>
  <div class=”dot close-dot” data-tooltip=”关闭”></div>
  <div class=”dot minimize-dot” data-tooltip=”最小化”></div>
  <div class=”dot maximize-dot” data-tooltip=”最大化”></div>
</div>

/* CSS代码 */

.mac-dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-dot {
  background: #ff5f56;
}

.minimize-dot {
  background: #ffbd2e;
}

.maximize-dot {
  background: #27c93f;
}

应用示例

 
 
 
登录窗口

可用于登录弹窗的顶部装饰

 
 
 
设置面板

可用于设置面板的窗口控制




温馨提示:文章具有时效性,若有错误或已失效,请在下方留言或联系站长
© 版权声明

THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容