使用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":{}}]}]}