垂直悬浮广告 - 优化版
这是优化后的版本，主要改进了关闭按钮的尺寸和位置，使其更小且与广告文案保持适当距离。
优化内容：
- 更小的关闭按钮：从18px减小到12px，尺寸更精致
- 增加广告右侧内边距：为关闭按钮留出更多空间
- 优化按钮位置：从right: 10px调整为right: 8px
- 悬停效果改进：添加了轻微的背景和放大效果
- 更好的视觉层次：关闭按钮与文案之间有了更清晰的分隔
主要优化点
/* 优化前的关闭按钮 */
.close-btn {
right: 10px;
font-size: 18px;
width: 20px;
height: 20px;
}
/* 优化后的关闭按钮 */
.close-btn {
right: 8px; /* 稍微远离边缘 */
font-size: 12px; /* 更小的字体 */
width: 16px; /* 更小的尺寸 */
height: 16px;
}
/* 为关闭按钮增加悬停背景效果 */
.close-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) rotate(-90deg) scale(1.1);
}
实现原理
通过以下方式实现按钮与文案的分离：
- 减小关闭按钮的字体大小和尺寸
- 增加广告容器右侧的内边距，为关闭按钮创造独立空间
- 调整关闭按钮的定位，使其不覆盖广告文案
- 添加悬停时的背景效果，提升按钮的可识别性
响应式考虑
在移动设备上，关闭按钮会进一步缩小，确保在小屏幕上也有良好的显示效果。
@media (max-width: 768px) {
.close-btn {
right: 6px;
font-size: 11px;
width: 14px;
height: 14px;
}
}