使用CSS創建3D的Digitalocean徽標

大家好！除非您一直生活在岩石下（甚至是那時），否則您無疑聽到了被Digitalocean收購的CSS-Tricks的消息。祝賀所有人！ ？

為了紀念這一場合，我想在CSS中創建Digitalocean徽標。我做到了，但是隨後使用了一些3D和視差。這也是一篇很好的文章，因為我製作徽標的方式使用了我寫過的文章中的各種文章。這個很酷的演示將其中許多概念融合在一起。

所以，讓我們進去！

創建Digitalocean徽標

我們將通過從simplecicons.org獲取它的SVG版本來“跟踪” digitalocean徽標。

 <svg img viewbox="“" xmlns="“" http:>
  <title> Digitalocean </title>
  <path d="M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828V3.564H7.39zm-3.563 0V-2.978H.85V2.978Z“> </path>
</svg>

請注意，我們正在使用這3D，我們可以將SVG包裹在.scene元素中。然後，我們可以使用我的“高級CSS插圖建議”文章中的跟踪技術。我們正在使用哈巴狗，因此我們可以利用其混合物並減少為3D部分編寫的標記量。

 -CONST尺寸= 40
。場景
  svg（角色='img'viewbox ='0 0 24 24'xmlns ='http：//www.w3.org/2000/svg'）
    標題Digitalocean
    path(d='M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828V3.564H7.39zm-3.563 0V-2.978H.85V2.978Z'）
  .logo（style =`-size：$ {size}`）
    .logo__arc.logo__arc- inner
    .logo__arc.logo__arc- outer
    .logo__square.logo__square-一個
    .logo__square.logo__square-兩個
    .logo__square.logo__ square-</path></svg>

這個想法是為這些元素設計樣式，以便它們重疊我們的徽標。我們不需要創建徽標的“弧”部分，因為我們將在3D中製作此徽標，並且可以使用兩個圓柱形狀創建弧線。這意味著目前我們需要的只是每個氣缸，內弧和外弧的包含元素。

查看此演示，該演示列出了Digitalocean徽標的不同部分。如果您切換“爆炸”和懸停元素，則可以包含的內容。

如果我們想要一個平坦的Digitalocean徽標，我們可以使用帶有圓錐梯度的CSS面具。然後，我們只需要一個使用固體邊框的“弧”元素。

 .logo__arc- outer {
  邊框：calc（var（-size） * 0.1925Vmin）實心＃006AFF;
  面具：圓錐級（透明0DEG 90DEG，＃000 90DEG）;
  變換：轉換（-50％，-50％）旋轉（180攝氏度）；
}

那會給我們徽標。 “揭示”過渡是一個夾子路徑，該夾顯示了下面的追踪的SVG圖像。

查看我的“有關複雜CSS插圖的建議”文章，以獲取有關與CSS中高級插圖合作的提示。

擠出3D

我們為Digitalocean徽標提供了藍圖，因此是時候製作3D了。為什麼我們不從一開始就創建3D塊？創建包含元素，使通過擠出創建3D變得更加容易。

我們在我的“學會用立方體思考而不是盒子思考”文章中介紹了CSS中創建3D場景。我們將使用其中一些技術來在這裡製作的東西。讓我們從徽標中的正方形開始。每個正方形是一個立方體。然後使用哈巴狗，我們將創建和使用Cuboid Mixin來幫助生成所有這些混合物。

混合蛋白cuboid（）
  .cuboid（class！= attributes.class）
    如果塊
      堵塞
     - 令S = 0
    而s <p>然後，我們可以在標記中使用它：</p><pre rel="Pug" data-line=""> 。場景
  .logo（style =`-size：$ {size}`）
    .logo__arc.logo__arc- inner
    .logo__arc.logo__arc- outer
    .logo__square.logo__square-一個
       cuboid（）。方形 - 平方蛋形 - 一個
    .logo__square.logo__square-兩個
       cuboid（）。方形 - 平方 - 蛋黃-2
    .logo__square.logo__ square-
       cuboid（）。方形 - 平方 - 蛋黃 - 三

接下來，我們需要樣式展示我們的長方體。請注意，立方體有六個側面，因此我們在利用VMIN長度單元以保持響應良好的同時，以nth-type（）偽選擇器進行樣式。

 .cuboid {
  寬度：100％；
  身高：100％；
  位置：相對；
}
.cuboid __sed {
  濾鏡：亮度（var（-b，1））;
  位置：絕對；
}
.cuboid__side：type（1）{
  -b：1.1;
  高度：calc（var（-depth，20） * 1Vmin）;
  寬度：100％；
  頂部：0;
  變換：轉換（0，-50％）rotatex（90攝氏度）;
}
.cuboid__side：type（2）{
  -b：0.9;
  身高：100％；
  寬度：calc（var（-depth，20） * 1Vmin）;
  頂部：50％；
  右：0;
  變換：轉化（50％，-50％）旋轉（90攝氏度）；
}
.cuboid__side：type（3）{
  -b：0.5;
  寬度：100％；
  高度：calc（var（-depth，20） * 1Vmin）;
  底部：0;
  變換：轉換（0％，50％）rotatex（90攝氏度）;
}
。
  -b：1;
  身高：100％；
  寬度：calc（var（-depth，20） * 1Vmin）;
  左：0;
  頂部：50％；
  變換：轉換（-50％，-50％）旋轉（90攝氏度）;
}
。
  -b：0.8;
  身高：100％；
  寬度：100％；
  變換：translate3d（0，0，calc（var（-depth，20） * 0.5vmin））;
  頂部：0;
  左：0;
}
。
  -b：1.2;
  身高：100％；
  寬度：100％；
  變換：translate3d（0，0，calc（var（ -  depth，20） * -0.5vmin））rotatey（180deg）;
  頂部：0;
  左：0;
}

我們正在以與過去文章中的方式不同的方式處理。我們只關心其深度，而不是將高度，寬度和深度應用於立方體。而且，我們可以利用過濾器來使用過濾器：為我們處理亮度，而不是試圖為雙方著色。

如果您需要使用過濾器將Cuboids或其他3D元素作為一個側面的元素，則可能需要洗牌。過濾的一面將使任何3D兒童更平坦。

Digitalocean徽標有三個立方體，因此我們為每個徽標提供了一個課程，並像這樣對它們進行了造型：

 。
  背景：HSL（var（-hue），100％，50％）；
}
.square-cuboid  - 一個
  /* 0.1925？這是該廣場的尺寸的百分比 */
   -  depth：calc（（var（ -  size） * 0.1925） * var（-depth-multiplier））;
}
。
   -  depth：calc（（var（ -  size） * 0.1475） * var（-depth-multiplier））;
}
.square-cuboid-三
   -  depth：calc（（var（ -  size） * 0.125） * var（-depth-multiplier））;
}

…給我們這樣的東西：

您可以使用深度滑塊來按照自己的意願來擠出立方體！對於我們的演示，我們選擇使立方體具有相同的高度，寬度和深度。弧的深度將與最大的立方體匹配。

現在為圓柱體。這個想法是創建兩個使用Border-Radius：50％的端。然後，我們可以將許多元素用作圓柱體的側面來創建效果。訣竅是將所有側面定位。

我們可以採用各種方法來創建CSS中的氣缸。但是，對我來說，如果我可以預見到很多次，我會嘗試並防止它。這意味著我可以重複使用其他演示的混合蛋白和一些樣式。這些樣式應該嘗試迎合我可以看到的場景。對於氣缸，我們可能需要考慮一些配置：

• 半徑
• 邊
• 顯示了多少個方面
• 是顯示圓柱的一個還是兩端

將其匯總在一起，我們可以創建一個滿足這些需求的哈巴狗混合物：

混合蛋白缸（半徑= 10，側= 10，切割= [5，10]，top = true，bottom = true）
  -CONST INTRANGLE =（（（側-2） * 180） /側） * 0.5
  -const cosangle = Math.cos（inneangle *（Math.pi / 180））
   -  const side = 2 * radius * Math.cos（Interangle *（Math.pi / 180））
  //-使用切割來確定渲染多少方面，從什麼意義
  。
    如果頂
      .cylinder__end.cylinder__segment.cylinder__end--top
    如果底部
      .cylinder__end.cylinder__segment.cylinder__end--bottom
    -const [start，end] =剪切
     - 讓我=開始
    當我<p>查看如何//-備份到代碼中的評論？這告訴Pug忽略評論，並將其從編譯的HTML標記中刪除。</p><p>為什麼我們需要將半徑傳遞到圓柱體中？好吧，不幸的是，我們還不能完全使用CSS Calc（）處理三角法（但即將到來）。而且，我們需要確定諸如圓柱側的寬度以及離他們應該投射多遠的距離之類的東西。很棒的是，我們有一種很好的方式將信息通過內聯自定義屬性傳遞給我們的樣式。</p><pre rel="Pug" data-line=""> 。圓柱（
  樣式=`
     - 側：$ {side};
     - 側：$ {側};
    -radius：$ {radius};`
  class！= attributes.class
）

我們混合蛋白的一個例子如下：

 氣缸（20，30，[10，30]）

這將產生一個半徑為20、30側的圓柱體，其中只有10至30側呈現。

然後我們需要一些樣式。值得慶幸的是，為Digitalocean徽標設計圓柱體非常簡單：

 。圓柱 {
  -bg：hsl（var（-hue），100％，50％）;
  背景：RGBA（255,43,0,0.5）;
  身高：100％；
  寬度：100％；
  位置：相對；
}
.cylinder__段{
  濾鏡：亮度（var（-b，1））;
  背景：var（-bg，＃e61919）;
  位置：絕對；
  頂部：50％；
  左：50％；
}
.cylinder__end {
  -b：1.2;
   - 末端：0.5;
  身高：100％；
  寬度：100％；
  邊界拉迪烏斯：50％；
  變換：translate3d（-50％，-50％，calc（（var（ -  depth，0） * var（ -  end-coeffity）） * 1vmin））;
}
.cylinder__end-bottom {
  -b：0.8;
   - 端效率：-0.5;
}
.cylinder__sside {
  -b：0.9;
  高度：calc（var（-depth，30） * 1vmin）;
  寬度：calc（var（ - 側） * 1Vmin）;
  變換：translate（-50％，-50％）rotatex（90DEG）rotatey（calc（（var（ -  index，0） * 360 / var（ - 側）） * 1DEG））translate3d（50％，0，calc（var（var（-radius） * 1vmin）））;
}

這個想法是，我們創建了圓柱體的所有側面，並將它們放在圓柱體的中間。然後，我們將它們旋轉在Y軸上，並大致通過半徑的距離將它們投射出來。

由於已經被遮蓋了，因此無需在內部顯示圓柱體的末端。但是我們確實需要向外部展示它們。我們的兩缸混合物的使用看起來像這樣：

 .logo（style =`-size：$ {size}`）
  .logo__arc.logo__arc- inner
     氣缸（（（尺寸 * 0.61） * 0.5，80，[0，60]，false，false）.cylinder-arc.cylinder-arc-inner
  .logo__arc.logo__arc- outer
     氣缸（（尺寸 * 1） * 0.5，100，[0，75]，true，true）.cylinder-arc.cylinder-arc-outer

我們知道較早追踪徽標時使用的直徑的半徑。另外，我們可以使用外部氣缸末端創建Digitalocean徽標的面。邊界寬度和夾式路徑的組合在這裡派上用場。

 。
.cylinder-arc  -  outer .cylinder__end- bottom {
  / *基於限制弧的尺寸的百分比 */
  邊緣寬度：calc（var（ -  size） * 0.1975vmin）;
  邊界風格：固體；
  邊界色：HSL（var（-hue），100％，50％）;
  -CLIP：多邊形（50％0，50％50％，0 50％，0 100％，100％100％，100％0）;
  剪輯路徑：var（ - 夾子）;
}

我們非常接近我們想要的地方！

但是，缺少一件事：封弧。我們需要為ARC創建一些末端，這需要兩個我們可以在X或Y軸上旋轉的要素：

 。場景
  .logo（style =`-size：$ {size}`）
    .logo__arc.logo__arc- inner
       氣缸（（（尺寸 * 0.61） * 0.5，80，[0，60]，false，false）.cylinder-arc.cylinder-arc-inner
    .logo__arc.logo__arc- outer
       氣缸（（尺寸 * 1） * 0.5，100，[0，75]，true，true）.cylinder-arc.cylinder-arc-outer
    .logo__square.logo__square-一個
       cuboid（）。方形 - 平方蛋形 - 一個
    .logo__square.logo__square-兩個
       cuboid（）。方形 - 平方 - 蛋黃-2
    .logo__square.logo__ square-
       cuboid（）。方形 - 平方 - 蛋黃 - 三
    .logo__cap.logo__cap- top
    .logo__cap.logo__cap-底部

弧的封頂末端將根據末端的邊界寬度值以及弧的深度假設高度和寬度。

 .logo__cap {
  -HUE：10;
  位置：絕對；
  高度：calc（var（-size） * 0.1925Vmin）;
  寬度：calc（var（ -  size） * 0.1975Vmin）;
  背景：HSL（var（-hue），100％，50％）；
}
.logo__cap- top {
  頂部：50％；
  左：0;
  變換：轉換（0，-50％）rotatex（90攝氏度）;
}
.logo__cap- bottom {
  底部：0;
  右：50％；
  變換：轉換（50％，0）旋轉（90攝氏度）;
  高度：calc（var（ - 大小） * 0.1975Vmin）;
  寬度：calc（var（ -  size） * 0.1925Vmin）;
}

我們已經蓋了弧線！

將所有內容匯總在一起，我們擁有Digitalocean徽標。該演示使您可以向不同的方向旋轉。

但是，我們的袖子還有一個技巧！

在徽標中添加視差效果

我們擁有3D Digitalocean徽標，但是如果以某種方式進行互動，那將是整潔的。早在2021年11月，我們介紹瞭如何使用CSS自定義屬性創建視差效應。讓我們在這裡使用相同的技術，這個想法是徽標通過跟隨用戶的鼠標光標旋轉和移動。

我們確實需要一小段JavaScript，以便我們可以更新一個係數所需的自定義屬性，該係數將徽標的移動沿CSS中的X和Y軸設置。這些係數是根據用戶指針位置計算的。我將經常使用greensock，以便我可以使用gsap.utils.maprange。但是，這是它實現maprange的香草JavaScript版本：

 const maprange =（inputlower，inputupper，output -lower，outputupper）=> {
  const input_range = inputupper -inputlower
  const output_range = outputupper-輸出命令
  返回值=> outputlower（（（（value -inputlower） / input_range） * output_range || 0）
}

const邊界= 100      
const update =（{x，y}）=> {
  const pos_x = maprange（0，window.innerwidth，-bounds，bounds）（x）
  const pos_y = maprange（0，window.innerheight，-bounds，bounds）（y）
  document.body.style.setproperty（' - 係數-X'，pos_x）
  document.body.style.setproperty（' - 係數y'，pos_y）
}

document.AddeventListener（“ PointerMove”，更新）

魔術發生在CSS-Land。這是以這種方式使用自定義屬性的主要好處之一。 JavaScript告訴CSS互動發生了什麼。但是，它不在乎CSS對它的作用。那是一個脫鉤。由於這個原因，我在許多演示中使用了這個JavaScript片段。我們可以簡單地通過更新CSS創建不同的體驗。

我們該怎麼做？使用直接範圍為.scene元素的calc（）和自定義屬性。考慮這些更新的樣式.scene：

 。場景 {
   - 旋轉Y：75DEG;
  -Rotation-X：-14DEG;
  變換：translate3d（0，0，100Vmin）
    rotatex（-16deg）
    Rotatey（28DEG）
    rotatex（calc（var（ - 係數y，0） * var（ -  rotation-x，0deg）））））））
    rotatey（calc（var（ - 係數-x，0） * var（ -  rotation-y，0deg）））;
}

使場景根據用戶的指針運動在X和Y軸上旋轉。但是，我們可以通過調整 - rotation-x和 - rotation-y的值來調整此行為。

每個立方體將以自己的方式移動。他們能夠在x，y或z軸上移動。但是，我們只需要定義一個轉換即可。然後，我們可以使用範圍的自定義屬性來完成其餘的工作。

 .logo__square {
  變換：translate3d（
    calc（min（0，var（ - 係數-x，0） * var（ -  oftset-x，0）） * 1％），
    calc（（var（ - 係數y） * var（ -  offset-y，0）） * 1％），
    calc（（var（ - 係數-x） * var（ -  offset-z，0）） * 1Vmin）
  ）；
}
.logo__square-一個{
   -  offset-X：50;
   -  offset-y：10;
   -  offset-Z：-2;
}
.logo__square-兩{
  -offset-X：-35;
   -  offset-y：-20;
   -  offset-Z：4;
}
.logo__square-三
   -  offset-X：25;
   -  offset-y：30;
  -offset-Z：-6;
}

那會給你這樣的東西：

我們可以將這些調整為我們內心的內容，直到我們得到我們滿意的東西！

在混音中添加介紹動畫

好吧，我有點纖維，並有一個決賽（我保證！）我們可以增強工作的方式。如果我們有某種介紹動畫怎麼辦？波浪或透露徽標的東西怎麼樣？

我們可以用身體元素的偽元素來做到這一點：

 ：根 {
  -HUE：215;
   - 判決：1;
   - 波速：2;
}

身體：之後，
身體：{之前{
  內容： '';
  位置：絕對；
  身高：100VH；
  寬度：100VW;
  背景：HSL（var（-hue），100％，calc（var（ - 輕度，50） * 1％））;
  變換：轉換（100％，0）;
  動畫名稱：wave;
  動畫 - 持續時間：calc（var（ - 波速） * 1s）;
  動畫 - 延遲：calc（var（ - 初始delay） * 1s）;
  動畫態度功能：易於啟動；
}
身體：{之前{
   - 光明：85;
  動畫態度功能：輕鬆脫穎而出；
}
@keyframes wave {
  從 {
    變換：轉換（-100％，0）;
  }
}

現在，這個想法是隱藏了Digitalocean徽標，直到波浪在其頂部沖洗為止。為了這種效果，我們將從不透明度為0的3D元素來動畫我們的3D元素。我們將從1的亮度中將所有方面動畫到我們的3D元素上，以揭示徽標。由於波顏色與徽標的顏色匹配，因此我們不會看到它逐漸消失。此外，使用動畫填充模式：這兩者都意味著我們的元素將在兩個方向上擴展我們的關鍵幀的樣式。

這需要某種形式的動畫時間表。這就是自定義屬性發揮作用的地方。我們可以使用動畫的持續時間來計算他人的延遲。我們在“如何製作純CSS 3D軟件包切換”和“ CSS中的動畫Matryoshka娃娃”文章中查看了這一點。

 ：根 {
  -HUE：215;
   - 判決：1;
   - 波速：2;
  -Fade-speed：0.5;
   - 濾波器速度：1;
}

.cylinder__段，
.cuboid __
.logo__cap {
  動畫名稱：淡入淡出，過濾器；
  動畫效果：calc（var（-fade-speed） * 1s），
    calc（var（ - 濾波器速） * 1s）;
  動畫 - 延遲：calc（（（var（ - 初始 -  delay）var（ -  wave-speed）） * 0.75s），
    calc（（var（ - 初始 - 延遲）var（ -  wave-speed）） * 1.15s;
  動畫填充模式：兩者;
}

@keyframes filter-in {
  從 {
    過濾器：亮度（1）;
  }
}

@KeyFrames vade-in {
  從 {
    不透明度：0;
  }
}

我們如何正確地安排時間？在Chrome's Devtool中進行一些修補並利用“動畫檢查員”的發展。嘗試調整此演示中的時間：

您可能會發現，如果您希望徽標在波浪一旦通過，則淡出的時機是不必要的。在這種情況下，嘗試將淡出淡入0。尤其是嘗試使用過濾器和褪色係數。它們與上面的代碼與0.75和1.15s相關。值得調整事物並在Chrome的動畫檢查員中玩耍，以了解事情的時間。

就是這樣！

將所有內容放在一起，我們為3D Digitalocean徽標提供了整潔的介紹！

而且，當然，只有一種用CSS創建Digitalocean徽標的方法。如果您看到其他可能性或可​​以進一步優化的可能性，請在評論中刪除指向演示的鏈接！

再次恭喜CSS-Tricks團隊和Digitalocean的新合作夥伴關係。我很高興看到收購方面的狀況。可以肯定的是：CSS-Tricks將繼續為社區啟發和創造出色的內容。 ？

以上是使用CSS創建3D的Digitalocean徽標的詳細內容。更多資訊請關注PHP中文網其他相關文章！