分类筛选HTML模块
下面是一个简洁、美观的分类筛选HTML模块，包含类别筛选和排序功能。这个模块采用了柔和的配色方案，自适应不同设备屏幕，并添加了简单的动画效果以提升用户体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类筛选模块</title>
<style>
/* 基础样式设置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.filter-container {
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 20px;
transition: all 0.3s ease;
}
.filter-title {
font-size: 18px;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* 分类筛选区域 */
.filter-section {
margin-bottom: 20px;
}
.filter-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.filter-label {
width: 80px;
font-weight: 500;
color: #555;
flex-shrink: 0;
}
.filter-options {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-option {
display: inline-block;
padding: 6px 12px;
background-color: #f5f7fa;
border-radius: 4px;
color: #666;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.filter-option:hover {
background-color: #e8f4ff;
color: #1890ff;
}
.filter-option.active {
background-color: #e6f7ff;
color: #1890ff;
border-color: #91caff;
}
/* 排序区域 */
.sort-section {
display: flex;
align-items: center;
padding: 12px 0;
border-top: 1px solid #eee;
}
.sort-label {
margin-right: 10px;
color: #555;
}
.sort-options {
display: flex;
gap: 15px;
}
.sort-option {
display: flex;
align-items: center;
color: #666;
cursor: pointer;
transition: color 0.2s ease;
}
.sort-option:hover {
color: #1890ff;
}
.sort-option.active {
color: #1890ff;
font-weight: 500;
}
.sort-icon {
margin-left: 3px;
font-size: 12px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.filter-item {
flex-direction: column;
align-items: flex-start;
}
.filter-label {
margin-bottom: 8px;
}
.filter-options {
width: 100%;
}
.sort-section {
flex-direction: column;
align-items: flex-start;
}
.sort-label {
margin-bottom: 10px;
}
.sort-options {
width: 100%;
}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-container {
animation: fadeIn 0.3s ease-out;
}
.filter-option, .sort-option {
position: relative;
overflow: hidden;
}
.filter-option::after, .sort-option::after {
content: '';
position: absolute;
background: rgba(24, 144, 255, 0.1);
width: 100px;
height: 100px;
border-radius: 50%;
transform: scale(0);
top: 50%;
left: 50%;
transition: transform 0.4s;
transform-origin: center;
}
.filter-option:active::after, .sort-option:active::after {
transform: scale(2);
opacity: 0;
transition: transform 0.4s, opacity 0.3s 0.1s;
}
</style>
</head>
<body>
<div class="filter-container">
<h2 class="filter-title">商品筛选</h2>
<div class="filter-section">
<!-- 分类筛选 -->
<div class="filter-item">
<div class="filter-label">分类：</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">电子产品</span>
<span class="filter-option">家居用品</span>
<span class="filter-option">服装服饰</span>
<span class="filter-option">食品饮料</span>
<span class="filter-option">美妆护肤</span>
</div>
</div>
<div class="filter-item">
<div class="filter-label">品牌：</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">品牌A</span>
<span class="filter-option">品牌B</span>
<span class="filter-option">品牌C</span>
<span class="filter-option">品牌D</span>
<span class="filter-option">品牌E</span>
</div>
</div>
<div class="filter-item">
<div class="filter-label">价格：</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">0-100元</span>
<span class="filter-option">100-300元</span>
<span class="filter-option">300-500元</span>
<span class="filter-option">500-1000元</span>
<span class="filter-option">1000元以上</span>
</div>
</div>
</div>
<!-- 排序区域 -->
<div class="sort-section">
<div class="sort-label">排序方式：</div>
<div class="sort-options">
<div class="sort-option active">
<span>默认</span>
</div>
<div class="sort-option">
<span>销量</span>
<span class="sort-icon">↓</span>
</div>
<div class="sort-option">
<span>价格</span>
<span class="sort-icon">↑</span>
</div>
<div class="sort-option">
<span>评分</span>
<span class="sort-icon">↓</span>
</div>
<div class="sort-option">
<span>最新上架</span>
</div>
</div>
</div>
</div>
<script>
// 简单的交互逻辑
document.addEventListener('DOMContentLoaded', function() {
// 分类筛选点击效果
const filterOptions = document.querySelectorAll('.filter-option');
filterOptions.forEach(option => {
option.addEventListener('click', function() {
// 同级选项取消选中
const siblings = Array.from(this.parentNode.children);
siblings.forEach(sib => sib.classList.remove('active'));
// 当前选项选中
this.classList.add('active');
});
});
// 排序选项点击效果
const sortOptions = document.querySelectorAll('.sort-option');
sortOptions.forEach(option => {
option.addEventListener('click', function() {
// 取消其他排序选项的选中状态
sortOptions.forEach(opt => opt.classList.remove('active'));
// 当前排序选项选中
this.classList.add('active');
// 切换排序方向（升序/降序）
const icon = this.querySelector('.sort-icon');
if (icon) {
if (icon.textContent === '↑') {
icon.textContent = '↓';
} else {
icon.textContent = '↑';
}
}
});
});
});
</script>
</body>
</html>模块特点：
视觉设计：
- 使用柔和的蓝色和灰色调，视觉友好
- 圆角元素和轻微阴影提升层次感
- 清晰的字体和边距，提高可读性
功能组件：
- 类别筛选：包含分类、品牌、价格等多种筛选条件
- 排序功能：支持默认、销量、价格、评分和上架时间排序
- 升序/降序指示图标
交互体验：
- 点击效果和状态变化
- 简单的涟漪动画效果
- 淡入动画提升页面加载体验
响应式设计：
- 在小屏幕设备上自动调整布局
- 适配移动端和桌面端
这个模块可以直接集成到任何网站中，也可以根据需要修改样式和筛选选项。
需支付 5元 阅读剩余内容
