网页设计selected

1. 视觉设计原则：

2. 常见应用场景：

• 导航菜单：采用「底边线+字体加粗」组合

css

nav-item.active {

border-bottom: 3px solid 2196F3;

font-weight: 600;

color: 1565C0;

• 数据表格：使用半透明背景色+左侧标识条

css

tr.selected {

background: rgba(33, 150, 243, 0.1);

position: relative;

tr.selected::before {

content: '';

position: absolute;

left: 0;

top: 0;

bottom: 0;

width: 4px;

background: 2196F3;

• 卡片选择：增加6-8px的外边框并提升海拔高度

css

card.selected {

border: 2px solid 2196F3;

box-shadow: 0 8px 16px rgba(0,0,0,0.1);

transform: translateY(-2px);

3. 交互动画实现：

css

/ 平滑过渡 /

selected {

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/ 涟漪效果 /

@keyframes ripple {

from { transform: scale(0); opacity: 0.5 }

to { transform: scale(2); opacity: 0 }

selected-effect::after {

content: '';

position: absolute;

background: rgba(33, 150, 243, 0.3);

border-radius: 50%;

animation: ripple 0.6s linear;

4. 可访问性要求：

5. 响应式适配技巧：

6. 框架实现示例（React）：

jsx

function SelectableList({ items }) {

const [selectedId, setSelectedId] = useState(null);

return (

))}