CSS制作IOS悬浮球样式：点击弹出子选项菜单

.float-button { position: fixed; bottom: 20px; right: 20px; z-index: 999; }

.main-button { display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #007aff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: pointer; }

.sub-buttons { position: absolute; bottom: 70px; right: -100px; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }

.sub-buttons a { display: block; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%; background-color: #007aff; color: #fff; text-align: center; line-height: 40px; font-size: 14px; text-decoration: none; transition: all 0.3s ease-in-out; }

.sub-buttons a:hover { background-color: #fff; color: #007aff; border: 2px solid #007aff; }

.float-button:hover .sub-buttons { right: 0; opacity: 1; visibility: visible; }

.float-button.active .sub-buttons { right: 0; opacity: 1; visibility: visible; }

var mainButton = document.querySelector('.main-button'); var floatButton = document.querySelector('.float-button');

mainButton.onclick = function() { floatButton.classList.toggle('active'); }

效果预览：

![效果预览](https://i.ibb.co/6X7sJ9j/i-OStKd-8-VZb.jpg)