CSS로 3D로 DigitalOcean 로고 생성

Howdy y'all! 당신이 바위 아래에서 살지 않았다면 (아마도 아마도) CSS- 트릭이 DigitalOcean에 의해 인수되었다는 소식을 들었습니다. 모두에게 축하드립니다! ?

이 행사를 기념하기 위해 약간의 허풍으로 CSS에서 DigitalOcean 로고를 만들고 싶었습니다. 나는 그렇게했지만 약간 3D와 시차로 조금 더 가져갔습니다. 이것은 내가 쓴 이전 기사의 다양한 작품을 사용하는 방식이 내가 쓴 이전 기사에서 다양한 작품을 사용하기 때문에 아주 좋은 기사를 만듭니다. 이 멋진 작은 데모는 많은 개념을 함께 제공합니다.

그러니 바로 뛰어 들자!

DigitalOcean 로고 생성

우리는 Simpleicons.org에서 SVG 버전을 가져 와서 DigitalOcean 로고를“추적”할 것입니다.

 <svg>
  <title> DigitalOcean </title>
   
</svg>

우리 가이 3D를 복용한다는 점을 염두에두면 SVG를 .scene 요소로 랩핑 할 수 있습니다. 그런 다음“고급 CSS 일러스트레이션에 대한 조언”기사에서 추적 기술을 사용할 수 있습니다. 우리는 퍼그를 사용하여 믹스 인을 활용하고 3D 부품을 위해 작성해야 할 마크 업의 양을 줄일 수 있습니다.

 - const size = 40
.장면
  svg (role = 'img'viewbox = '0 0 24 24'xmlns = 'http : //www.w3.org/2000/svg')
    제목 DigitalOcean
    경로 (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 014.147 4.148C1.889 5.177-1.924 10.05-6.844.4.844.4.844.4.84.4.844.4.84.4.84.4.84.4.84.4.4.84. 10.064V-4.61H7.391V4.623H4.61V24C7.86 0 13.967-7.588 11.397-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 (스타일 =`-크기 : $ {size}`)
    .logo__arc.logo__arc--- 인너
    .logo__arc.logo__arc--
    .logo__square.logo__square-- 하나
    .logo__square.logo__square-- 두 번째
    .logo__square.logo__square-- 3시

아이디어는 이러한 요소를 우리 로고와 겹치도록 스타일링하는 것입니다. 우리는이 로고를 3D로 만들고 두 개의 실린더 모양으로 아크를 만들 수 있기 때문에 앞으로 생각하고있는 로고의 "아크"부분을 만들 필요가 없습니다. 즉, 현재 우리가 필요한 것은 각 실린더, 내부 아크 및 외부 아크에 포함 된 요소입니다.

DigitalOcean 로고의 다른 조각을 제시하는이 데모를 확인하십시오. "폭발"및 호버 요소를 전환하면 로고가 구성하는 것을 할 수 있습니다.

평평한 DigitalOcean 로고를 원한다면 원뿔 구배가있는 CSS 마스크를 사용할 수 있습니다. 그런 다음 견고한 테두리를 사용하는 하나의 "아크"요소 만 필요합니다.

 .logo__arc-- outer {
  국경 : calc (var (-size) * 0.1925Vmin) solid #006aff;
  마스크 : conic-gradient (투명한 0DEG 90DEG, #000 90DEG);
  변환 : 번역 (-50%, -50%) 회전 (180deg);
}

그것은 우리에게 로고를 줄 것입니다. "공개"는 아래에 추적 된 SVG 이미지를 보여주는 클립 경로를 전환합니다.

CSS의 고급 일러스트레이션 작업에 대한 팁은“복잡한 CSS 일러스트레이션에 대한 조언”기사를 확인하십시오.

3D에 대한 압출

DigitalOcean 로고에 대한 청사진이 있으므로이 3D를 만들 시간입니다. 처음부터 3D 블록을 만들지 않은 이유는 무엇입니까? 포함 요소를 작성하면 압출을 통해 3D를보다 쉽게 ​​만들 수 있습니다.

우리는“상자 대신 큐브로 생각하는 학습”기사에서 CSS에서 3D 장면을 만드는 것을 다루었습니다. 우리는 우리가 여기에서 만들고있는 기술 중 일부를 사용할 것입니다. 로고의 사각형부터 시작하겠습니다. 각 정사각형은 입방체입니다. 그리고 퍼그를 사용하여 우리는 cuboid mixin을 만들고 사용하여 모든 것을 생성 할 것입니다.

 Mixin cuboid ()
  .cuboid (class! = attributes.class)
    블록 인 경우
      차단하다
    - S = 0하자
    S <p> 그런 다음 마크 업에서 이것을 사용할 수 있습니다.</p><pre rel="Pug" data-line=""> .장면
  .LOGO (스타일 =`-크기 : $ {size}`)
    .logo__arc.logo__arc--- 인너
    .logo__arc.logo__arc--
    .logo__square.logo__square-- 하나
       cuboid (). Square-Cuboid.square-cuboid-- 하나
    .logo__square.logo__square-- 두 번째
       cuboid (). square-cuboid.square-cuboid-두고
    .logo__square.logo__square-- 3시
       cuboid (). Square-Cuboid.square-cuboid-- 3

다음으로, 우리는 입방체를 표시하기위한 스타일이 필요합니다. cuboids는 6 개의면을 가지고 있으므로 우리는 nth-of-type () 의사 선택기를 가진 사람들을 스타일링하면서 Vmin 길이 장치를 활용하여 물건을 반응하게 유지합니다.

 .cuboid {
  너비 : 100%;
  높이 : 100%;
  위치 : 상대;
}
.cuboid__side {
  필터 : 밝기 (var (-b, 1));
  위치 : 절대;
}
.cuboid__side : nth-of-type (1) {
  -B : 1.1;
  높이 : calc (var (-깊이, 20) * 1vmin);
  너비 : 100%;
  상단 : 0;
  변환 : 번역 (0, -50%) ROTATEX (90DEG);
}
.cuboid__side : nth-of-type (2) {
  --b : 0.9;
  높이 : 100%;
  너비 : calc (var (-깊이, 20) * 1vmin);
  상단 : 50%;
  오른쪽 : 0;
  변환 : 번역 (50%, -50%) Rotatey (90deg);
}
.cuboid__side : nth-of-type (3) {
  --b : 0.5;
  너비 : 100%;
  높이 : calc (var (-깊이, 20) * 1vmin);
  하단 : 0;
  변환 : 번역 (0%, 50%) ROTATEX (90DEG);
}
.cuboid__side : nth-of-type (4) {
  -B : 1;
  높이 : 100%;
  너비 : calc (var (-깊이, 20) * 1vmin);
  왼쪽 : 0;
  상단 : 50%;
  변환 : 번역 (-50%, -50%) Rotatey (90deg);
}
.cuboid__side : nth-of-type (5) {
  --b : 0.8;
  높이 : 100%;
  너비 : 100%;
  변환 : translate3d (0, 0, calc (var (-깊이, 20) * 0.5vmin);
  상단 : 0;
  왼쪽 : 0;
}
.cuboid__side : nth-of-type (6) {
  -B : 1.2;
  높이 : 100%;
  너비 : 100%;
  변환 : translate3d (0, 0, calc (var (-깊이, 20) * -0.5vmin)) rotatey (180deg);
  상단 : 0;
  왼쪽 : 0;
}

우리는 과거 기사에서 수행 한 방식과 다른 방식으로 이것에 접근하고 있습니다. 우리는 입방체에 높이, 너비 및 깊이를 적용하는 대신 깊이에만 관심이 있습니다. 그리고 양쪽을 색칠하려고하는 대신 필터 : 밝기를 사용하여 우리를 위해 그것을 처리 할 수 ​​있습니다.

필터를 사용하여 측면의 자식으로 입방체 또는 기타 3D 요소가 필요한 경우 셔플해야 할 수도 있습니다. 필터링 된 쪽은 3D 어린이를 평평하게합니다.

DigitalOcean 로고에는 3 개의 큐보이가 있으므로 각각에 대한 수업이 있으며 다음과 같이 스타일링하고 있습니다.

 .square-cuboid .cuboid__side {
  배경 : HSL (var (-Hue), 100%, 50%);
}
.square-cuboid-- 하나 {
  /* 0.1925? 해당 정사각형의 크기의 비율 */
  --depth : calc ((var (-size) * 0.1925) * var (-깊이 multiplier);
}
.square-cuboid-- 2 {
  --depth : calc ((var (-size) * 0.1475) * var (-깊이 multiplier);
}
.square-cuboid-- 3 {
  --depth : calc ((var (-size) * 0.125) * var (-깊이 multiplier);
}

… 우리에게 다음과 같은 것을 제공합니다.

당신은 깊이 슬라이더를 사용하여 원하는대로 cuboids를 압제 할 수 있습니다! 데모의 경우, 우리는 큐보이드를 높이, 너비 및 깊이의 진정한 큐브로 만들기로 선택했습니다. 아크의 깊이는 가장 큰 입구와 일치합니다.

이제 실린더를 위해. 아이디어는 Border-Radius : 50%를 사용하는 두 개의 끝을 만드는 것입니다. 그런 다음 많은 요소를 실린더의 측면으로 사용하여 효과를 만듭니다. 트릭은 모든면을 배치하는 것입니다.

CSS에서 실린더를 만들기 위해 취할 수있는 다양한 접근법이 있습니다. 그러나 나를 위해, 이것이 여러 번 사용하여 예측할 수있는 것이라면, 나는 그것을 시도하고 미래를 보장 할 것입니다. 그것은 다른 데모를 위해 믹스 인과 스타일을 만드는 것을 의미합니다. 그리고 이러한 스타일은 내가 볼 수있는 시나리오를 시도하고 자격을 갖추어야합니다. 실린더의 경우 고려할 수있는 구성이 있습니다.

• 반지름
• 측면
• 그 측면 중 몇 개가 표시됩니다
• 실린더의 한쪽 끝 또는 양쪽 끝을 표시할지 여부

그것을 합치면, 우리는 그러한 요구를 충족시키는 퍼그 믹스를 만들 수 있습니다.

 Mixin Cylinder (Radius = 10, Side = 10, Cut = [5, 10], top = true, bottom = true)
  - const innerangle = (((측면 -2) * 180) / 측면) * 0.5
  - const cosangle = math.cos (Innerangle * (Math.pi / 180))
  - const side = 2 * radius * math.cos (Innerangle * (math.pi / 180))
  //- 컷을 사용하여 얼마나 많은면이 렌더링되는지, 어떤 지점에서
  .cylinder (style =`-side : $ {side}; ---sides : $ {side};-radius : $ {radius};`class! = attributes.class)
    상단
      .cylinder__end.cylinder__segment.cylinder__end-탑
    바닥이 있다면
      .cylinder__end.cylinder__segment.cylinder__end-바닥
    - const [start, end] = 컷
    - I = 시작하자
    내가 끝나는 동안
      .cylinder__side.cylinder__segment (style =`-index : $ {i};`)
      - 나

//- 코드의 주석에 어떻게 전달되는지 확인하십시오. 그것은 Pug에게 주석을 무시하고 컴파일 된 HTML 마크 업에서 맡기라고 지시합니다.

반경을 실린더로 전달 해야하는 이유는 무엇입니까? 불행히도, 우리는 아직 css calc ()로 삼각법을 처리 할 수 ​​없습니다 (그러나 그것은 다가오고 있습니다). 그리고 우리는 실린더 측면의 너비와 중앙에서 얼마나 멀리 떨어져 있는지와 같은 것들을 해결해야합니다. 가장 좋은 점은 인라인 사용자 정의 속성을 통해 해당 정보를 스타일로 전달할 수있는 좋은 방법이 있다는 것입니다.

 .실린더(
  스타일 =`
    -측 : $ {side};
    -면 : $ {sides};
    -radius : $ {radius};`
  클래스! = 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__segment {
  필터 : 밝기 (var (-b, 1));
  배경 : var (-bg, #e61919);
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
}
.cylinder__end {
  -B : 1.2;
  -엔드 콘센트 : 0.5;
  높이 : 100%;
  너비 : 100%;
  국경-라디우스 : 50%;
  변환 : translate3d (-50%, -50%, calc ((var (-깊이, 0) * var (-end-coefficial)) * 1vmin);
}
.cylinder__end-바닥 {
  --b : 0.8;
  -엔드 콘센트 : -0.5;
}
.cylinder__side {
  --b : 0.9;
  높이 : calc (var (-깊이, 30) * 1vmin);
  너비 : calc (var (-side) * 1vmin);
  변환 : 번역 (-50%, -50%) rotatex (90deg) Rotatey (calc ((var (-index, 0) * 360 / var (-side)) * 1deg)) translate3d (50%, 0, calc (-radius) * 1vmin);
}

아이디어는 우리가 실린더의 모든면을 만들어 실린더의 중앙에 넣는 것입니다. 그런 다음 y 축에서 회전하여 대략 반경의 거리로 돌출됩니다.

이미 가려 졌기 때문에 실린더의 끝을 내부 부분에 보여줄 필요가 없습니다. 그러나 우리는 외부 부분에 대해 보여줄 필요가 있습니다. 2 기통 믹스 인 사용은 다음과 같습니다.

 .LOGO (스타일 =`-크기 : $ {size}`)
  .logo__arc.logo__arc--- 인너
     원통
  .logo__arc.logo__arc--
     실린더 ((size * 1) * 0.5, 100, [0, 75], True, True) .cylinder-arc.cylinder-arc-

우리는 로고를 일찍 추적 할 때 사용한 직경의 반경을 알고 있습니다. 또한 외부 실린더 엔드를 사용하여 DigitalOcean 로고의 얼굴을 만들 수 있습니다. 국경폭과 클립 경로의 조합이 여기에 편리합니다.

 .cylinder-arc-- outer .cylinder__end-탑,
.cylinder-arc-- outer .cylinder__end--bottom {
  / * 아크를 막는 데 필요한 크기의 백분율에 따라 */
  테두리 width : calc (var (-size) * 0.1975Vmin);
  국경 스타일 : 단단한;
  국경 색 : HSL (VAR (-HUE), 100%, 50%);
  -Clip : 다각형 (50% 0, 50% 50%, 0 50%, 0 100%, 100% 100%, 100% 0);
  클립 경로 : var (-클립);
}

우리는 우리가 원하는 곳과 매우 가깝습니다!

그래도 놓친 것이 있습니다 : 아크를 캡핑합니다. x 또는 y 축에 위치하고 회전 할 수있는 두 가지 요소가 필요한 아크에 대한 일부 끝을 만들어야합니다.

 .장면
  .LOGO (스타일 =`-크기 : $ {size}`)
    .logo__arc.logo__arc--- 인너
       원통
    .logo__arc.logo__arc--
       실린더 ((size * 1) * 0.5, 100, [0, 75], True, True) .cylinder-arc.cylinder-arc-
    .logo__square.logo__square-- 하나
       cuboid (). Square-Cuboid.square-cuboid-- 하나
    .logo__square.logo__square-- 두 번째
       cuboid (). square-cuboid.square-cuboid-두고
    .logo__square.logo__square-- 3시
       cuboid (). Square-Cuboid.square-cuboid-- 3
    .logo__cap.logo__cap- 탑
    .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-- 타프 {
  상단 : 50%;
  왼쪽 : 0;
  변환 : 번역 (0, -50%) ROTATEX (90DEG);
}
.logo__cap-바닥 {
  하단 : 0;
  오른쪽 : 50%;
  변환 : 번역 (50%, 0) Rotatey (90deg);
  높이 : calc (var (-size) * 0.1975Vmin);
  너비 : calc (var (-size) * 0.1925Vmin);
}

우리는 아크를 막았습니다!

모든 것을 함께 던지면 Digitalocean 로고가 있습니다. 이 데모를 사용하면 다른 방향으로 회전 할 수 있습니다.

그러나 여전히 우리 소매에 한 가지 더 트릭이 있습니다!

로고에 시차 효과를 추가합니다

우리는 3D DigitalOcean 로고가 있지만 어떤 식 으로든 대화식이라면 깔끔합니다. 2021 년 11 월, 우리는 CSS 사용자 정의 속성으로 시차 효과를 만드는 방법을 다루었습니다. 여기에서 동일한 기술을 사용해 봅시다. 아이디어는 사용자의 마우스 커서를 따라 로고가 회전하고 움직입니다.

CSS의 X 및 Y 축을 따라 로고의 움직임을 설정하는 계수에 필요한 사용자 정의 속성을 업데이트 할 수 있도록 JavaScript의 대시가 필요합니다. 이러한 계수는 사용자의 포인터 위치에서 계산됩니다. 나는 종종 greensock을 사용하여 gsap.utils.maprange를 사용할 수 있습니다. 그러나 여기에 MapRange를 구현하는 바닐라 JavaScript 버전이 있습니다.

 const mapRange = (입력자, 입력 업퍼, 출력, 출력 업퍼) => {
  const input_range = inputupper -inputLower
  const output_range = outputupper- 출력
  return value => outputLower (((value -inputLower) / input_Range) * output_Range || 0)
}

const bounds = 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 ( '-Coefficient-X', pos_x)
  document.body.style.setproperty ( '-계수 -y', pos_y)
}

document.addeventListener ( 'pointermove', 업데이트)

마법은 CSS-Land에서 발생합니다. 이것은 이런 식으로 사용자 정의 속성을 사용하는 것의 주요 이점 중 하나입니다. JavaScript는 CSS에게 상호 작용에서 무슨 일이 일어나고 있는지 알려줍니다. 그러나 CSS가 무엇을하는지는 신경 쓰지 않습니다. 그것은 래드 디커플링입니다. 나는이 이유 때문에이 JavaScript 스 니펫을 많은 데모에 사용합니다. CSS를 업데이트하여 단순히 다른 경험을 만들 수 있습니다.

우리는 어떻게합니까? .Scene 요소에 직접 스코핑 된 calc () 및 사용자 정의 속성을 사용하십시오. .Scene에 대한 업데이트 된 스타일을 고려하십시오.

 .장면 {
  -otation-y : 75deg;
  -otation-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 (-오프셋 -x, 0) * 1%),
    calc ((var (-계수 -y) * var (-Offset-Y, 0) * 1%),
    calc ((var (-계수 -x) * var (-오프셋 -z, 0) * 1vmin)
  );
}
.logo__square-- 하나 {
  -offset-x : 50;
  -offset-y : 10;
  -offset-z : -2;
}
.logo__square-- 2 {
  -offset-x : -35;
  -offset-y : -20;
  -offset-z : 4;
}
.logo__square-- 3 {
  -offset-x : 25;
  -offset-y : 30;
  -offset-z : -6;
}

그것은 당신에게 다음과 같은 것을 줄 것입니다 :

그리고 우리가 행복한 것을 얻을 때까지 우리는 마음의 내용에 이것을 조정할 수 있습니다!

믹스에 소개 애니메이션 추가

좋아, 나는 조금 찢어졌고 우리가 우리의 일을 향상시킬 수있는 마지막 (약속!) 방법을 가지고있다. 우리가 일종의 인트로 애니메이션이 있다면 어떨까요? 파도 나 로고를 드러내고 공개하는 파도 나 무언가는 어떻습니까?

우리는 신체 요소의 의사 요소로 이것을 할 수 있습니다.

 : 루트 {
  -HUE : 215;
  -초기화 : 1;
  -파 속도 : 2;
}

바디 : 후,
바디 : 전 {
  콘텐츠: '';
  위치 : 절대;
  높이 : 100VH;
  너비 : 100VW;
  배경 : HSL (var (-Hue), 100%, calc (var (-Lightness, 50) * 1%);
  변환 : 번역 (100%, 0);
  애니메이션-이름 : 웨이브;
  애니메이션 기간 : calc (var (-wave-speed) * 1s);
  애니메이션 델리 : calc (var (-Itent-Delay) * 1s);
  애니메이션 타이밍 기능 : 편의;
}
바디 : 전 {
  -조명 : 85;
  애니메이션 타이밍 기능 : 편의;
}
@keyframes wave {
  에서 {
    변환 : 번역 (-100%, 0);
  }
}

이제 아이디어는 Digitalocean 로고가 파도가 맨 위로 씻을 때까지 숨겨져 있다는 것입니다. 이 효과를 위해, 우리는 0의 불투명도에서 3D 요소를 애니메이션 할 것입니다. 그리고 우리는 1의 밝기에서 3D 요소로 모든 측면을 애니메이션하여 로고를 드러 낼 것입니다. 웨이브 컬러가 로고의 웨이브 컬러와 일치하기 때문에 우리는 그것이 사라지는 것을 보지 못할 것입니다. 또한 애니메이션 필드를 사용하여 : 두 요소가 키 프레임의 스타일을 양방향으로 확장 할 것임을 의미합니다.

여기에는 어떤 형태의 애니메이션 타임 라인이 필요합니다. 그리고 이것은 사용자 정의 속성이 시작되는 곳입니다. 우리는 애니메이션의 지속 시간을 사용하여 다른 사람들의 지연을 계산할 수 있습니다. 우리는“순수한 CSS 3D 패키지 토글을 만드는 방법”과“CSS의 애니메이션 Matryoshka 인형”기사에서 이것을 보았습니다.

 : 루트 {
  -HUE : 215;
  -초기화 : 1;
  -파 속도 : 2;
  -패드 속도 : 0.5;
  -필터 속도 : 1;
}

.cylinder__segment,
.cuboid__side,
.logo__cap {
  애니메이션-이름 : 페이드 인, 필터 인;
  애니메이션 기간 : calc (var (-fade-speed) * 1s),
    calc (var (-필터 속도) * 1s);
  애니메이션 델리 : calc ((var (-Itent-Delay) var (-wave-speed)) * 0.75s),
    calc ((var (-Itent-Delay) var (-wave-speed)) * 1.15s);
  애니메이션 필 모드 : 둘 다;
}

@keyframes Filter-In {
  에서 {
    필터 : 밝기 (1);
  }
}

@keyframes fade-in {
  에서 {
    불투명도 : 0;
  }
}

우리는 어떻게 타이밍을 올바르게 얻을 수 있습니까? Chrome의 DevTool에서 "애니메이션 검사관"을 약간 땜질하고 사용하는 것은 먼 길을갑니다. 이 데모에서 타이밍을 조정해보십시오.

파도가 지나면 로고가 있기를 원한다면 페이드 타이밍이 불필요하다는 것을 알 수 있습니다. 이 경우 페이드를 0으로 설정하십시오. 특히 필터를 실험하고 페이드 계수를 실험하십시오. 위의 코드에서 0.75 및 1.15와 관련이 있습니다. Chrome의 애니메이션 검사관에서 물건을 조정하고 연극을하는 것이 좋습니다.

그게 다야!

모든 것을 합쳐서, 우리는 3D DigitalOcean 로고에 대한 깔끔한 소개가 있습니다!

물론 CSS와 함께 3D로 DigitalOcean 로고를 만들기위한이 접근법은 단 하나의 접근 방식입니다. 다른 가능성이나 더 이상 최적화 할 수있는 것을 볼 수 있다면 주석에서 데모에 대한 링크를 삭제하십시오!

새로운 파트너십을 위해 CSS- 트릭 팀과 DigitalOcean에게 다시 축하합니다. 나는 획득과 함께 일이 어디로 가는지 알게되어 기쁩니다. 한 가지 확실한 점은 CSS- 트릭은 커뮤니티에 계속해서 환상적인 콘텐츠를 고무시키고 제작할 것입니다. ?

위 내용은 CSS로 3D로 DigitalOcean 로고 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!