使用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中文网其他相关文章！