使用CSS实现中国结效果
中国结是中国传统手工编织工艺品，造型对称、结构复杂，用纯CSS还原其核心视觉效果并不困难。本文将通过CSS的伪元素、渐变、阴影等特性，实现一个简化版的中国结图案，适合作为节日装饰、网页徽标等场景使用。
实现思路
我们采用分层叠加的思路来构建中国结：
- 用外层容器定义整体尺寸和红色基调
- 通过
::before和::after伪元素生成交叉的绳结主体 - 使用线性渐变模拟绳结的纹理和立体感
- 添加底部流苏元素完善整体造型
- 利用CSS动画实现轻微的浮动效果，模拟悬挂的质感
完整实现代码
下面是完整的HTML和CSS代码，你可以直接复制到本地文件运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS中国结</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fef6f6;
font-family: "Microsoft YaHei", sans-serif;
}
/* 中国结外层容器 */
.chinese-knot {
position: relative;
width: 200px;
height: 300px;
animation: float 3s ease-in-out infinite;
}
/* 顶部悬挂环 */
.knot-top {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 20px;
background: linear-gradient(to bottom, #e53935 0%, #b71c1c 100%);
border-radius: 10px 10px 0 0;
}
/* 绳结主体 */
.knot-body {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
background: linear-gradient(45deg, #e53935 25%, #b71c1c 25%, #b71c1c 50%, #e53935 50%, #e53935 75%, #b71c1c 75%);
background-size: 20px 20px;
border-radius: 20px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}
/* 交叉效果 - 伪元素实现 */
.knot-body::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 120px;
height: 120px;
border: 8px solid #e53935;
border-radius: 50%;
box-shadow: 0 0 10px rgba(229, 57, 53, 0.5);
}
.knot-body::after {
content: '';
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
border: 6px solid #b71c1c;
border-radius: 50%;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}
/* 中心装饰 */
.knot-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #ffeb3b;
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 235, 59, 0.8);
}
/* 流苏部分 */
.knot-tassel {
position: absolute;
top: 180px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 120px;
background: linear-gradient(to bottom, #e53935 0%, #b71c1c 100%);
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
/* 流苏细节 */
.knot-tassel::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100px;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 5px,
rgba(255, 255, 255, 0.1) 5px,
rgba(255, 255, 255, 0.1) 6px
);
}
/* 浮动动画 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* 说明文字 */
.desc {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
color: #666;
font-size: 14px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="chinese-knot">
<div class="knot-top"></div>
<div class="knot-body">
<div class="knot-center"></div>
</div>
<div class="knot-tassel"></div>
<div class="desc">CSS实现的中国结效果</div>
</div>
</body>
</html>代码解析
1. 整体布局：外层.chinese-knot容器设置相对定位，所有子元素基于该容器做绝对定位，保证各部件位置精准。
2. 绳结纹理：.knot-body使用线性渐变linear-gradient生成红底斜纹效果，模拟编织绳的纹理，background-size控制纹理密度。
3. 交叉结构：通过::before和::after伪元素生成两个不同大小的圆形边框，叠加在主体上形成中国结标志性的交叉造型，边框颜色深浅区分提升层次感。
4. 立体效果：使用box-shadow内阴影模拟绳结的凹陷感，外阴影模拟凸起的光影效果，让平面图案更有立体感。
5. 流苏实现：.knot-tassel用clip-path裁剪出上窄下宽的流苏造型，伪元素添加重复线性渐变模拟流苏的纤维细节。
6. 动画效果：定义float动画，让中国结在垂直方向做缓慢的上下浮动，模拟悬挂时的轻微晃动效果。
扩展优化建议
如果你需要更还原真实中国结的效果，可以尝试以下调整：
- 增加更多的伪元素或子元素，实现更复杂的绳结交叉结构
- 使用
filter: drop-shadow()替代普通box-shadow，让阴影更贴合不规则形状 - 调整颜色为更正的传统中国红，比如#cc0000或者#ff0000
- 给流苏部分添加更细的条纹，模拟真实流苏的丝线质感
- 添加鼠标hover效果，比如放大、颜色变亮等交互
纯CSS实现这类装饰图案的优势是不需要加载额外图片，渲染速度快，还可以根据需要灵活调整尺寸和颜色，非常适合网页场景使用。