使用HTML+CSS制作逼真的红色开关

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在制作过程中，我使用了各种不同的CSS技术，包括渐变，3D转换，动画和过渡。在本教程中，我将深入探讨其中的一些技术。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"演示地址：","attrs":{}},{"type":"link","attrs":{"href":"http://haiyong.site/kaiguan","title":"","type":null},"content":[{"type":"text","text":"http://haiyong.site/kaiguan","attrs":{}}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"模拟状态","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了解决这个问题，我们可以使用原生HTML元素之一。由于我们只需要维护2个状态，因此","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"checkbox","attrs":{}},{"type":"text","text":"元素是一个不错的选择。我们可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":":checked","attrs":{}}],"attrs":{}},{"type":"text","text":"CSS选择器根据复选框是否选中来应用CSS。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们将整个内容包装在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"","attrs":{}}],"attrs":{}},{"type":"text","text":"中，以将整个元素的click事件链接到","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"复选框","attrs":{}},{"type":"text","text":"，然后使用CSS隐藏复选框本身。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n \n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".switch {\n input {\n display: none;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一个问题是我们不能基于复选框状态将CSS应用于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"","attrs":{}}],"attrs":{}},{"type":"text","text":"本身，因为CSS中没有“祖先选择器”。 因此，我将所有switch元素放置在复选框之后，并使用相邻的兄弟选择器（+）将CSS应用于它们。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n \n

\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".switch {\n input {\n display: none;\n\n &:checked + .button {\n // Apply some CSS to .button when the checkbox is checked\n }\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果需要模拟具有两个以上状态的元素，则可以使用其他HTML元素，例如单选按钮（","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"","attrs":{}}],"attrs":{}},{"type":"text","text":"）。有些人将这项技术带入了一个新的高度，仅使用CSS即可创建整个游戏！在CodePen上查看此","attrs":{}},{"type":"link","attrs":{"href":"https://codepen.io/collection/AKkZro","title":"","type":null},"content":[{"type":"text","text":"纯CSS游戏集合","attrs":{}}]},{"type":"text","text":"，以获取一些启发。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制作黑框","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/6a/6a5a75c2f9a8d554933b0ed5f07c6f46.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-shadow","attrs":{}}],"attrs":{}},{"type":"text","text":"模拟按钮的框架。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-shadow","attrs":{}}],"attrs":{}},{"type":"text","text":"是一个非常强大的CSS属性，因为它允许你堆叠多个用逗号分隔的阴影效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用了一组5种阴影效果来创建框架，并使用了一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-radius","attrs":{}}],"attrs":{}},{"type":"text","text":"属性来使阴影在角落变圆。细目如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".switch {\n border-radius: 5px;\n box-shadow: \n 0 0 10px 2px rgba(black, 0.2), // The surrounding shadow (first layer)\n 0 0 1px 2px black, // The surrounding shadow (second layer)\n inset 0 2px 2px -2px white, // The top white \"shine\"\n inset 0 0 2px 15px #47434c, // The light gray frame\n inset 0 0 2px 22px black; // The internal black shadow\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制作3D按钮形状","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用CSS转换和转换来使按钮显示为3维。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该按钮本身由3个div组成（准确地说是1 div和2个伪元素），如下所示：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b212b8a4e37eba8070371f606fe1b69a.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".button {\n &::before {\n height: 50px;\n width: 100%;\n transform: rotateX(-90deg);\n }\n &::after {\n height: 50px;\n width: 100%;\n transform: translateY(50px) rotateX(-90deg);\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后，我将整个按钮旋转了25度，并用于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"transform-origin","attrs":{}}],"attrs":{}},{"type":"text","text":"将枢轴点设置为远离div，以使该按钮看起来像是围绕按钮内部更深的某个点而不是围绕div旋转：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1b/1b2822f4a8fbd0d162225ab6937417b9.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".switch {\n perspective: 700px;\n\n .button {\n $rotation: 25deg;\n $pivot-distance: 20px;\n transform-origin: center center -#{$pivot-distance};\n transform: translateZ($pivot-distance) rotateX(-$rotation);\n transform-style: preserve-3d;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制作动画","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用CSS过渡来回旋转开关。我希望通过缓慢地开始并快速结束来使过渡显得现实。我本来可以使用其中一种原生的缓动函数，像ease-in，但那并不能产生正确的动画，因此我改用了一个自定义","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cubic-bezier()","attrs":{}}],"attrs":{}},{"type":"text","text":"缓动函数：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b0/b04a73fe31fc9af387c218f3c9f66bd2.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该曲线意味着过渡缓慢地开始，并迅速结束，就像一个真实的开关缓慢地转动直到其“咔嗒”一声朝着终点一样。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"制作I/O字符","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/29/29878d2f1fa16696091b6960c89ad6d5.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我本可以使用多种技巧来创建I/O字符。我本可以使用真实字母并对其应用样式，或者使用特殊字体。但是由于这些都是非常简单的绘制字符，因此我决定使用渐变来制作它们。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"渐变的真正功能来自CSS被视为“图像”的事实，因此可以从background属性的功能中受益。CSS中的背景不仅可以堆叠（如阴影），而且还可以具有自定义的位置和大小！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"语法非常简单：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"background: / \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可以使用逗号堆叠多个渐变，并添加","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-repeat: no-repeat","attrs":{}}],"attrs":{}},{"type":"text","text":"以防止渐变重复：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".image {\n background:\n / ,\n / ,\n / ;\n background-repeat: no-repeat;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用具有2个渐变的背景制作了角色。对于“I”字符，我使用了全白色","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"linear-gradient()","attrs":{}}],"attrs":{}},{"type":"text","text":"，并将其变窄和变长。对于“ O”字符，我使用了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"radial-gradient()","attrs":{}}],"attrs":{}},{"type":"text","text":"具有4个色标的a，从透明到白色再回到透明。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"background:\n linear-gradient(white, white) 50% 20% / 5% 20%, // 白色竖线 (\"I\")\n radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80% / 33% 25%; // 白圈 (\"O\")\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你看一下","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"radial-gradient()","attrs":{}}],"attrs":{}},{"type":"text","text":"，你会注意到2%每个色标之间都有一个缝隙：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"radial-gradient(\n transparent 50%, \n white 52%, \n white 70%, \n transparent 72%\n)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这使不同的颜色融合在一起，而不是具有清晰的像素化过渡。为了说明这一点，请看下面的图片：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/72/721e2efd12044f8295208cac766c3243.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这是CSS固有的渐变行为-当色标之间存在间隙时，它会在颜色之间创建平滑的混合。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"使“LED”渐变","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如上图所示，我堆叠了2个渐变，以获得隐藏在半透明红色塑料后面的LED灯泡的外观，上面带有小的圆形凸起。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我必须使用2个元素，每个梯度一个，因为第一个梯度必须是无重复的，而第二个梯度必须是重复的。另外，我想使灯光“闪烁”，所以我不得不将它们分开。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一个元素是该.light元素，在这里我使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"aradial-gradient()","attrs":{}}],"attrs":{}},{"type":"text","text":"来说明红色LED灯，其中心更亮（中心为橙色，而周围环境为红色）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".light {\n background-image: radial-gradient(\n adjust-hue(lighten($color, 20%), 35), // 橙色\n $color 40%, // 红色\n transparent 70%\n );\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"别为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"adjust-hue()","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lighten()","attrs":{}}],"attrs":{}},{"type":"text","text":"感到束手无策，我将在下一部分中介绍这些内容。现在，只需将它们视为十六进制颜色即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二个元素是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".dots","attrs":{}}],"attrs":{}},{"type":"text","text":"元素，我在其中使用了一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"radial-gradient()","attrs":{}}],"attrs":{}},{"type":"text","text":"具有透明中心的重复项来创建圆形凸点矩阵。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后，我使用动画来创建闪烁效果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/51/51d0c80185cddcfa0f10b2242aebe5da.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n@keyframes flicker {\n 0% {opacity: 1}\n 80% {opacity: 0.8}\n 100% {opacity: 1}\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"通过变量控制颜色","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着这支笔的流行，有些人要求用不同的颜色查看它。最初，我在整个CSS中都对颜色进行了硬编码，因此我将其更改为SASS变量以进行简单配置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，我希望主色易于配置，因此拥有多个颜色变量还不够好。我需要通过一个变量控制所有颜色和阴影。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了实现这一目标，我用SASS的内置色彩功能：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lighten()","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"darken()","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"adjust-hue()","attrs":{}}],"attrs":{}},{"type":"text","text":"（SassMe是可视化的这些功能输出一个很好的工具）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"lighten()和darken()的用途不言自明。它们根据给定的百分比使给定的颜色更浅或更深。例如，lighten(black, 50%)将黑色与50％的白色混合，产生灰色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2d/2d8c1241ba770324492de26fd8a2f996.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，LED灯，lighten()并且darken()还不够，因为光的中心呈桔红色，而周围是红色的。那不是不同的颜色阴影，而是完全不同的颜色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"adjust-hue()","attrs":{}}],"attrs":{}},{"type":"text","text":"派上用场的地方。它使你可以将颜色的色相属性更改给定程度。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"颜色的色调是颜色在色轮上的位置，可以用单个数值表示，通常以度（0-360）为单位。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/46/4637875eafa2cce2ae09444efc7e260f.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，我习惯","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"adjust-hue()","attrs":{}}],"attrs":{}},{"type":"text","text":"将颜色的色相属性“旋转”到右侧35度：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"adjust-hue($color, 35)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"产生这个：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/46/4689f75fe296b75ea54e152a61672403.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，如果颜色是红色，则要旋转的颜色将是橙色。但是，如果颜色是绿色，则旋转后的颜色将变成蓝色！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ef/efcda5e1c8225306a95bbf3a4c89a30c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此，现在，你可以通过一个变量控制开关中的所有颜色","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"$color","attrs":{}}],"attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/17/17ef7193a716615294c7bf6aa29e6581.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"概括总结","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事实证明，本教程要比我预期的要长一些，乍一看，可能会有些不知所措，以了解用于进行此切换的所有不同技术和技巧。但是，当你将其分解为基本要素时，这些技术很容易理解。完整源码可在公众号【海拥】内回复【开关】","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我希望能够对开发过程提供一些见识，并希望你学习了一些新的CSS技术。","attrs":{}}]}]}