好使用纯CSS绘制一个中国结并添加动画效果

本篇文章为大家展示了好使用纯CSS绘制一个中国结并添加动画效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。春节是中国人最重要的节日，春节期间的习俗也非常多，东西南北各不相同。
为了增添年味，过年时家家户户会置办各种年货和装饰品，把家里营造得红红火火，红灯笼，红对联，红福字，以及红色的中国结。中国结原材料是简简单单的红绳，经过古人的巧妙构思，编织成一个菱形网格的样子。网格上的绳线紧紧连接在一起，象征一家人团结和睦，幸福美满。那么如何用CSS来实现一个中国结呢？ 先看最终效果。
如此 Amazing 的效果，你也可以做出来，下面让我们开始吧！先从网上搜一张中国结的图片，中国结的样式不止一种，我们选择一种最经典的中国结的编织样式。
图片的质量决定了最后成品的质量，下面就是一张比较整洁，结构清晰的中国结图片。供我们写CSS时参考使用。有了图片就可以开始写代码了吗？当然不是。首先回想一下现在要做的事：用CSS画个中国结。你真的想好了吗？这是一个可以实现的目标吗？想象一下，当你的领导给你布置一个任务：让手机壳根据APP的主题色而变色。你会直接开始写代码吗？你会想两个问题：APP作为一个软件，是否有和手机壳互动的接口手机壳如果接收到色值，如何变色这是一个比较极端的例子，上面两条都无法实现。回到CSS和这张中国结的图片。我们首先要想的是，我们应该用哪些CSS技术，来实现这个图片。你现在回过头仔细观察一下上面的图片。经过短暂的观察，我们发现这样一些要点：中国结的绳子是由渐变色组成，深红，浅红，深红中间的主体部分由22根相互交叉的绳子组合而成，而且每过一个交叉点就会交换一下层级顺序有一些环状结构，颜色渐变的过程与直线相同整体都是红色，以黄色点缀然后就是预想一下实现原理：直线的颜色渐变，使用 linear-gradient 或者 repeating-linear-gradient环状渐变，使用 radial-gradient网格的交叉，使用 mask 遮罩来达到交叉效果四分之三环以及底部两根弯曲的绳子使用 clip-path 来裁剪为了使编码更方便，采用 SCSS许多地方可以使用 ::before ::after 实现，减少html代码上面是从技术角度从整体观察，下面就是对整个图片进行拆分，先确定其 html 结构。中间像棋盘一样的网格结构，可以作为一个 html 标签四周16个小半圆，使用16个标签定位实现两个四分之三圆，放在一组里，使用相同的样式，第二个基于第一个旋转180deg两个十字结，样式一样，所以也放在一组里顶部三个小结构，放在一组，外层命名为header底部左右两部分高度相似，也放在一组，命名为footer这样我们得到了 html 的结构实际编码当中，html 并不是一次写成，而是经过不断调整才成为上面这个样子。网格最终效果是个菱形，也就是正方形旋转了45deg，我们先不旋转，看看它是什么样子先设定一个变量，表示绳子的宽度，我们设为--width，这个尺寸很重要，后面所有尺寸都是基于这个宽度，这样后面我们调整整个图形的大小，只要改这一个--width就行了。垂直和水平都各有11根绳，绳子之间的间隙约为绳子宽度的 0.5 倍，所以可以得到网格的宽高都为 11 + 0.5 * 10 = 16 倍的绳子宽度，所以我们可以这样写：给 body 加上一些样式，让盒子居中，再加一个深色背景再给 .grid 也加一个白色背景色，测试一下：这样屏幕正中间就出现了一个白色方块，下面我们把白色背景改成11根线的样式：就得到了下面的效果：可能你有点蒙圈。发生了什么事情？还是让事情变得简单点，我们先画一根不带渐变的红线：先是一个线性渐变 linear-gradient，然后旋转角度设为90deg，让它从左到右渐变（默认是从下往上），然后起始值设为--red-1（你问我red-1到red-3哪来的？效果图上吸来的），在--width处也设置为--red-1，这样就得到了一根宽为 --width 的红线。但这还没完，得接着在--width 处加一个透明transpanrent，这样从--width直到图形的最右侧就都不填充颜色了。但这不太像根绳子，让红线渐变起来：这样就得到了一根有一点点立体效果的绳子。可是怎么让它横向重复11次，并且间隔0.5倍的--width呢？看下面的代码：大家来找茬：这段代码和上一段有什么不同？眼尖的你可能已经看出来了，多了这一行：以/为分界线，左边的含义是background-positoin，右边的含义是background-size。0 0也就是左上角。calc(var(--width) * 1.5) calc(var(--width) * 1.5) 也就是一个正方形，宽度为1.5倍绳宽。这样一个小方块，在垂直和水平方向上重复，就得了我们想要的结果：可是我们想要的是网格，现在顶多也就算个栅格。那就使用伪类复制一份，并且旋转90deg：对比一下参考图片：不能说完全不相干，但是人家一看就经过了能工巧匠的编织，咱们这只能算简单的叠加，怎么才能让上面变成下面呢？经过仔细的观察，发现只要把上面一层横着的线，稍加一些遮挡就能实现交叉编织的效果。用哪个css属性实现呢？那就只有mask 了。下图蓝色框是需要遮挡的部分，绿色框是需要重复的部分。仔细分析一下绿框的构成：本质上是在一个33的正方形上挖两个11的小洞，位置分别是0 0 和 1.5 1.5。我们要如何画这样一张图？并把这张图应用到mask上呢？mask是通过传入的图片进行遮罩处理，而背景图除了传入一张png以外，CSS还内置了几个生成背景图的函数:linear-gradient：线性渐变repeating-linear-gradient：重复线性渐变radial-gradient：径向渐变conic-gradient：圆锥渐变这些函数都可以和mask配合。这里我们使用conic-gradient实现上面的图形。用conic-gradient 实现上图，思路要反着来：不是在方形上挖孔，而是用多免费云主机、域名个矩形将要渲染的部分填充颜色，剩下的部分自然就是透明的：CSS实现如下：预览效果目前为止完整代码没错，这个图形，只用了.grid这一个标签！但是只有网格还不够，让我们继续。回头看一下参考图：嗯，环形渐变，那就是radial-gradient了：这样就得到了半个环形图，让我们使用定位把它和网格结合看看对比素材图，发现环形不是直接紧贴在网格上的，而是先延伸了一小段直线，再接的曲线。那我们就给它增个高吧：上面使用两个伪类，为半圆环加了两截高度为 0.5 倍 --width的增高垫，效果如下图接着复制16个这样的图形，分别定位到各自的位置上：

相关推荐: html中如何通过disabled和readonly将input设置为只读效果

这篇文章主要介绍html中如何通过disabled和readonly将input设置为只读效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　有两种方式可以实现input的只读效果：disabled和readonly。 　　自然两种…