这篇文章教你一步一步用纯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 的结构