这篇文章教你一步一步用纯CSS画一个中国结，给这个中国结增加红包雨动画效果，希望对大家有所帮助！

春节是中国人最重要的节日，春节期间的习俗也很多，东西南北各不相同。 为了增添新年的味道，每个家庭都会购买各种新年商品和装饰品，创造一个繁荣的家，红灯笼、红对联、红祝福字和红色的中国结。

中国结原料是一根简单的红绳，经过古人的巧妙构思，编织成菱形网格。网格上的绳子紧紧地连接在一起，象征着家庭团结、和谐、幸福。

那么如何用CSS来实现一个中国结呢？ 先看最终效果。

在线预览Codepen地址：
https://codepen.io/cliea/pen/LYOPbBr

如此 Amazing 效果，你也可以做出来，让我们开始吧！

1、编码前

1. 收集的材料越简单越好

首先，从网上搜索一张中国结的图片。中国结有不止一种风格。我们选择最经典的中国结编织风格。 图片的质量决定了最终成品的质量，下面是一张相对干净、结构清晰的中国结图片。供我们在写CSS时参考。

2. 观察细节，构思实现的可能性

你能用图片开始写代码吗？当然不是。

首先回想一下现在要做的事情：用CSS画一个中国结。

你真的想好了吗？这是一个可以实现的目标吗？想象一下，当你的领导给你一个任务：让手机外壳根据应用程序的主题颜色变色。你会直接开始写代码吗？

你会想两个问题：

• 作为软件，APP是否有与手机壳互动的接口？

• 如果手机壳接收到色值，如何变色

这是一个极端的例子，以上两个都无法实现。回到CSS和这张中国结的图片。我们首先要考虑的是，我们应该使用哪些CSS技术来实现这张图片。现在回头仔细看看上面的图片。

经过短暂的观察，我们发现了这样的东西要点：

• 中国结的绳子由渐变色组成，深红、浅红、深红

• 中间的主体部分由22根相互交叉的绳子组成，每个交叉点都会交换层次顺序

• 有一些环结构，颜色渐变的过程与直线相同

• 整体为红色，黄色点缀

然后就是预想一下实现原理：

• 直线的颜色渐变，使用直线的颜色渐变 linear-gradient 或者 repeating-linear-gradient

• 环状渐变，使用 radial-gradient

• 网格的交叉，使用 mask 遮罩达到交叉效果

• 使用四分之三环和底部两根弯曲的绳子 clip-path 来裁剪

• 为了使编码更方便，使用 SCSS

• 许多地方都可以使用 ::before ::after 实现，减少html代码

3. 结构拆分，化整为零

以上是从技术角度从整体观察，以下是整个图片的拆分，首先确定它 html 结构。

• 中间像棋盘一样的网格结构可以作为棋盘的网格结构 html 标签

• 周围有16个小半圆，用16个标签定位实现

• 两个四分之三的圆，放在一组中，使用相同的风格，第二个基于第一个旋转180deg

• 两个十字结风格相同，所以也放在一组中

• 顶部有三个小结构，放在一组，外层命名为header

• 底部左右两部分高度相似，也放在一组中，命名为footer

所以我们得到了 html 的结构