Membuat logo DigitalOcean dalam 3D dengan CSS

Howdy y'all! Kecuali anda telah tinggal di bawah batu (dan mungkin juga), anda sudah pasti mendengar berita bahawa trik CSS, diperoleh oleh DigitalOcean. Tahniah kepada semua orang! ?

Sebagai sedikit hurray untuk memperingati kesempatan itu, saya ingin membuat logo DigitalOcean di CSS. Saya melakukannya, tetapi kemudian mengambil sedikit lagi dengan beberapa 3D dan paralaks. Ini juga membuat artikel yang cukup baik kerana cara saya membuat logo menggunakan pelbagai keping dari artikel sebelumnya yang saya tulis. Demo kecil yang sejuk ini membawa banyak konsep tersebut bersama -sama.

Jadi, mari kita menyelam betul!

Membuat logo DigitalOcean

Kami akan "mengesan" logo DigitalOcean dengan merebut versi SVG dari Simpleicons.org.

 <svg role="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <tirtle> 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. 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>
</tirtle></svg>

Berhati -hati bahawa kami mengambil 3D ini, kami boleh membungkus SVG kami dalam elemen .scene. Kemudian kita boleh menggunakan teknik pengesanan dari artikel "Nasihat untuk Advanced CSS Illustrations" saya. Kami menggunakan PUG supaya kami dapat memanfaatkan campurannya dan mengurangkan jumlah markup yang perlu kami tulis untuk bahagian 3D.

 - saiz const = 40
.scene
  svg (peranan = 'img' viewbox = '0 0 24 24' xmlns = 'http: //www.w3.org/2000/svg')
    Tajuk DigitalOcean
    jalan (d = 'm12.04 0c5.408 -.02.005 5.37.005 11.992H4.638C0-4.923 4.882-8.731 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-Otter
    .logo__square.logo__square-satu
    .logo__square.logo__square-dua
    .logo__square.logo__square-tiga

Idea ini adalah untuk gaya unsur -unsur ini supaya mereka bertindih logo kami. Kami tidak perlu membuat bahagian "arka" logo seperti yang kita fikirkan ke hadapan kerana kita akan membuat logo ini dalam 3D dan boleh membuat arka dengan dua bentuk silinder. Ini bermakna untuk sekarang semua yang kita perlukan adalah elemen yang mengandungi untuk setiap silinder, arka dalaman, dan arka luar.

Semak demo ini yang meletakkan kepingan logo DigitalOcean yang berbeza. Sekiranya anda bertukar -tukar elemen "meletup" dan melayang, anda boleh apa logo itu.

Jika kami mahukan logo DigitalOcean yang rata, kami boleh menggunakan topeng CSS dengan kecerunan konik. Kemudian kita hanya memerlukan satu elemen "arka" yang menggunakan sempadan pepejal.

 .logo__arc-Otter {
  sempadan: calc (var (-saiz) * 0.1925vmin) pepejal #006aff;
  Mask: Conic-Gradient (telus 0DEG 90DEG, #000 90DEG);
  Transform: Terjemahan (-50%, -50%) berputar (180deg);
}

Itu akan memberi kita logo. Peralihan "mendedahkan" laluan klip yang menunjukkan imej SVG yang dikesan di bawahnya.

Semak artikel "Nasihat untuk CSS Kompleks" saya untuk petua untuk bekerja dengan ilustrasi lanjutan di CSS.

Extruding untuk 3d

Kami mempunyai cetak biru untuk logo DigitalOcean kami, jadi sudah tiba masanya untuk membuat 3D ini. Mengapa kita tidak membuat blok 3D dari awal? Mencipta unsur -unsur yang mengandungi, menjadikannya lebih mudah untuk membuat 3D melalui penyemperitan.

Kami meliputi mencipta adegan 3D dalam CSS dalam artikel "Belajar Berfikir dalam Kiub bukan Kotak". Kami akan menggunakan beberapa teknik untuk apa yang kami buat di sini. Mari kita mulakan dengan dataran dalam logo. Setiap persegi adalah cuboid. Dan menggunakan PUG, kami akan membuat dan menggunakan mixin cuboid untuk membantu menghasilkan semuanya.

 Mixin Cuboid ()
  .cuboid (kelas! = atribut.class)
    jika blok
      blok
    - biarkan s = 0
    sementara s <p> Kemudian kita boleh menggunakannya dalam markup kami:</p><pre rel="Pug" data-line=""> .scene
  .logo (style = `--size: $ {size}`)
    .logo__arc.logo__arc-inner
    .logo__arc.logo__arc-Otter
    .logo__square.logo__square-satu
       cuboid (). square-cuboid.square-cuboid-satu
    .logo__square.logo__square-dua
       cuboid (). square-cuboid.square-cuboid-dua
    .logo__square.logo__square-tiga
       cuboid (). persegi-cuboid.square-cuboid-tiga

Seterusnya, kita memerlukan gaya untuk memaparkan cuboid kita. Perhatikan bahawa cuboid mempunyai enam sisi, jadi kami menggayakan mereka yang mempunyai pemilih pseudo nth-of-type () sambil memanfaatkan unit panjang VMIN untuk menyimpan sesuatu yang responsif.

 .cuboid {
  Lebar: 100%;
  Ketinggian: 100%;
  Kedudukan: Relatif;
}
.cuboid__side {
  penapis: kecerahan (var (-b, 1));
  Kedudukan: Mutlak;
}
.cuboid__side: nth-of-type (1) {
  --B: 1.1;
  ketinggian: calc (var (-kedalaman, 20) * 1vmin);
  Lebar: 100%;
  Atas: 0;
  Transform: Terjemahan (0, -50%) RotatEx (90Deg);
}
.Cuboid__side: nth-of-type (2) {
  --B: 0.9;
  Ketinggian: 100%;
  lebar: calc (var (-kedalaman, 20) * 1vmin);
  Atas: 50%;
  Kanan: 0;
  Transform: Terjemahan (50%, -50%) Rotatey (90deg);
}
.Cuboid__side: nth-of-type (3) {
  --b: 0.5;
  Lebar: 100%;
  ketinggian: calc (var (-kedalaman, 20) * 1vmin);
  Bawah: 0;
  Transform: Terjemahan (0%, 50%) Rotatex (90Deg);
}
.cuboid__side: nth-of-type (4) {
  --b: 1;
  Ketinggian: 100%;
  lebar: calc (var (-kedalaman, 20) * 1vmin);
  Kiri: 0;
  Atas: 50%;
  Transform: Terjemahan (-50%, -50%) Rotatey (90Deg);
}
.Cuboid__side: nth-of-type (5) {
  --b: 0.8;
  Ketinggian: 100%;
  Lebar: 100%;
  transform: translate3d (0, 0, calc (var (-kedalaman, 20) * 0.5vmin));
  Atas: 0;
  Kiri: 0;
}
.Cuboid__side: nth-of-type (6) {
  --B: 1.2;
  Ketinggian: 100%;
  Lebar: 100%;
  transform: translate3d (0, 0, calc (var (-kedalaman, 20) * -0.5vmin)) rotatey (180deg);
  Atas: 0;
  Kiri: 0;
}

Kami menghampiri ini dengan cara yang berbeza dari cara kami melakukannya dalam artikel masa lalu. Daripada menggunakan ketinggian, lebar, dan kedalaman ke cuboid, kita hanya prihatin dengan kedalamannya. Dan bukannya cuba mewarnai setiap sisi, kita boleh menggunakan penapis: kecerahan untuk mengendalikannya untuk kita.

Sekiranya anda perlu mempunyai cuboid atau elemen 3D lain sebagai anak sisi menggunakan penapis, anda mungkin perlu mengosongkan perkara. Sisi yang ditapis akan meratakan mana -mana kanak -kanak 3D.

Logo DigitalOcean mempunyai tiga cuboid, jadi kami mempunyai kelas untuk setiap satu dan menggayakannya seperti ini:

 .square-cuboid .cuboid__side {
  Latar Belakang: HSL (var (-Hue), 100%, 50%);
}
.square-cuboid-satu {
  /* 0.1925? Ia adalah peratusan -saiz untuk persegi itu */
  -depth: calc ((var (-saiz) * 0.1925) * var (-kedalaman-pengganti));
}
.square-cuboid-dua {
  -depth: calc ((var (-saiz) * 0.1475) * var (-kedalaman-pengganti));
}
.square-cuboid-tiga {
  -depth: calc ((var (-saiz) * 0.125) * var (-kedalaman-pengganti));
}

... yang memberi kita sesuatu seperti ini:

Anda boleh bermain dengan slider kedalaman untuk mengeluarkan cuboid seperti yang anda kehendaki! Untuk demo kami, kami telah memilih untuk membuat kiub cuboids benar dengan ketinggian, lebar, dan kedalaman yang sama. Kedalaman arka akan sepadan dengan cuboid terbesar.

Sekarang untuk silinder. Idea ini adalah untuk mewujudkan dua hujung yang menggunakan radius sempadan: 50%. Kemudian, kita boleh menggunakan banyak elemen sebagai sisi silinder untuk menghasilkan kesan. Caranya adalah meletakkan semua sisi.

Terdapat pelbagai pendekatan yang boleh kita ambil untuk mencipta silinder dalam CSS. Tetapi, bagi saya, jika ini adalah sesuatu yang saya dapat meramalkan menggunakan banyak kali, saya akan mencuba dan membuktikan masa depannya. Ini bermakna membuat campuran dan beberapa gaya saya boleh menggunakan semula demo lain. Dan gaya -gaya itu harus mencuba dan memenuhi senario yang dapat saya lihat muncul. Untuk silinder, terdapat beberapa konfigurasi yang mungkin ingin kita pertimbangkan:

• jejari
• sisi
• Berapa banyak pihak yang dipaparkan
• sama ada untuk menunjukkan satu atau kedua -dua hujung silinder

Meletakkannya bersama -sama, kita boleh membuat pug mixin yang memenuhi keperluan tersebut:

 Silinder Mixin (Radius = 10, sisi = 10, potong = [5, 10], atas = benar, bawah = benar)
  - const innerangle = (((sisi - 2) * 180) / sisi) * 0.5
  - const cosangle = math.cos (innerleL * (math.pi / 180))
  - const side = 2 * radius * math.cos (innerangle * (math.pi / 180))
  //- Gunakan potongan untuk menentukan berapa banyak pihak yang diberikan dan dari titik apa
  .cylinder (style = `--sisi: $ {side};--sisi: $ {sides};--radius: $ {radius};` class! = attributes.class)
    jika atas
      .cylinder__end.cylinder__segment.cylinder__end-top
    jika bawah
      .cylinder__end.cylinder__segment.cylinder__end-Bottom
    - const [start, end] = potong
    - Biarkan i = bermula
    Semasa saya <akhir .cylinder__side.cylinder__segment i><p> Lihat bagaimana //- disediakan untuk komen dalam kod? Itu memberitahu Pug untuk mengabaikan komen itu dan meninggalkannya dari markup HTML yang disusun.</p>
<p> Mengapa kita perlu lulus jejari ke dalam silinder? Malangnya, kita tidak dapat mengendalikan trigonometri dengan CSS Calc () baru sahaja (tetapi ia akan datang). Dan kita perlu menyelesaikan perkara -perkara seperti lebar sisi silinder dan sejauh mana dari pusat mereka harus memproyeksikan. Perkara yang menarik ialah kami mempunyai cara yang baik untuk menyampaikan maklumat tersebut kepada gaya kami melalui sifat tersuai sebaris.</p>
<pre rel="Pug" data-line=""> .Cylinder (
  gaya = `
    --sisi: $ {sampingan};
    -sisi: $ {sisi};
    --Radius: $ {RADIUS}; `
  kelas! = attributes.class
)

Contoh penggunaan untuk mixin kami adalah seperti berikut:

 Silinder (20, 30, [10, 30])

Ini akan mewujudkan silinder dengan jejari 20, 30 sisi, di mana hanya 10 hingga 30 diberikan.

Kemudian kita memerlukan beberapa gaya. Menggayakan silinder untuk logo DigitalOcean cukup mudah, bersyukur:

 .cylinder {
  --BG: HSL (var (-hue), 100%, 50%);
  Latar Belakang: RGBA (255,43,0,0.5);
  Ketinggian: 100%;
  Lebar: 100%;
  Kedudukan: Relatif;
}
.cylinder__segment {
  penapis: kecerahan (var (-b, 1));
  latar belakang: var (-bg, #e61919);
  Kedudukan: Mutlak;
  Atas: 50%;
  Kiri: 50%;
}
.cylinder__end {
  --B: 1.2;
  -Koefisien: 0.5;
  Ketinggian: 100%;
  Lebar: 100%;
  Radius sempadan: 50%;
  transform: translate3d (-50%, -50%, calc ((var (-kedalaman, 0) * var (-end-coefficient)) * 1vmin));
}
.Cylinder__end-Bottom {
  --b: 0.8;
  -Koefisien-lekap: -0.5;
}
.cylinder__side {
  --B: 0.9;
  ketinggian: calc (var (-kedalaman, 30) * 1vmin);
  lebar: calc (var (-sisi) * 1vmin);
  Transform: Terjemahan (-50%, -50%) RotatEx (90Deg) Rotatey (Calc ((var (-Index, 0) * 360 / var (-sisi)) * 1Deg)) Translate3d (50%, 0, calc (-radius) * 1vmin));
}

Ideanya ialah kita membuat semua sisi silinder dan meletakkannya di tengah -tengah silinder. Kemudian kami memutarnya pada paksi-y dan memproyeksikannya dengan kira-kira jarak jejari.

Tidak perlu menunjukkan hujung silinder di bahagian dalam kerana mereka sudah dikaburkan. Tetapi kita perlu menunjukkan kepada mereka untuk bahagian luar. Penggunaan Mixin dua silinder kami kelihatan seperti ini:

 .logo (style = `--size: $ {size}`)
  .logo__arc.logo__arc-inner
     silinder ((saiz * 0.61) * 0.5, 80, [0, 60], palsu, palsu) .cylinder-arc.cylinder-arc-inner
  .logo__arc.logo__arc-Otter
     Silinder ((saiz * 1) * 0.5, 100, [0, 75], benar, benar) .cylinder-arc.cylinder-arc-Outter

Kami tahu jejari dari diameter yang kami gunakan ketika mengesan logo lebih awal. Selain itu, kita boleh menggunakan hujung silinder luar untuk mencipta wajah logo DigitalOcean. Gabungan lebar sempadan dan laluan klip berguna di sini.

 .Cylinder-Arc-Otter .Cylinder__end-Top,
.Cylinder-arc-Otter .Cylinder__end-Bottom {
  / * Berdasarkan peratusan saiz yang diperlukan untuk menutup arka */
  lebar sempadan: calc (var (-saiz) * 0.1975vmin);
  gaya sempadan: pepejal;
  Border-color: HSL (var (-hue), 100%, 50%);
  --LIP: Polygon (50% 0, 50% 50%, 0 50%, 0 100%, 100% 100%, 100% 0);
  klip-laluan: var (-klip);
}

Kami cukup dekat dengan tempat yang kami mahukan!

Ada satu perkara yang hilang walaupun: menutup arka. Kita perlu membuat beberapa hujung untuk arka, yang memerlukan dua elemen yang dapat kita letakkan dan berputar pada paksi x atau y:

 .scene
  .logo (style = `--size: $ {size}`)
    .logo__arc.logo__arc-inner
       silinder ((saiz * 0.61) * 0.5, 80, [0, 60], palsu, palsu) .cylinder-arc.cylinder-arc-inner
    .logo__arc.logo__arc-Otter
       Silinder ((saiz * 1) * 0.5, 100, [0, 75], benar, benar) .cylinder-arc.cylinder-arc-Outter
    .logo__square.logo__square-satu
       cuboid (). square-cuboid.square-cuboid-satu
    .logo__square.logo__square-dua
       cuboid (). square-cuboid.square-cuboid-dua
    .logo__square.logo__square-tiga
       cuboid (). persegi-cuboid.square-cuboid-tiga
    .logo__cap.logo__cap-top
    .logo__cap.logo__cap-Bottom

Hujung arka yang dihadkan akan menganggap ketinggian dan lebar berdasarkan nilai lebar sempadan akhir serta kedalaman arka.

 .logo__cap {
  --Hue: 10;
  Kedudukan: Mutlak;
  ketinggian: calc (var (-saiz) * 0.1925vmin);
  lebar: calc (var (-saiz) * 0.1975vmin);
  Latar Belakang: HSL (var (-Hue), 100%, 50%);
}
.logo__cap-top {
  Atas: 50%;
  Kiri: 0;
  Transform: Terjemahan (0, -50%) RotatEx (90Deg);
}
.logo__cap-Bottom {
  Bawah: 0;
  Kanan: 50%;
  Transform: Terjemahan (50%, 0) Rotatey (90deg);
  ketinggian: calc (var (-saiz) * 0.1975vmin);
  lebar: calc (var (-saiz) * 0.1925vmin);
}

Kami telah melengkapkan arka!

Membuang semuanya bersama -sama, kami mempunyai logo DigitalOcean kami. Demo ini membolehkan anda memutarnya ke arah yang berbeza.

Tetapi masih ada satu lagi trik di atas lengan kami!

Menambah kesan paralaks ke logo

Kami mempunyai logo DigitalOcean 3D kami tetapi ia akan menjadi kemas jika ia interaktif dalam beberapa cara. Kembali pada November 2021, kami meliputi cara membuat kesan paralaks dengan sifat tersuai CSS. Mari kita gunakan teknik yang sama di sini, idea adalah bahawa logo berputar dan bergerak dengan mengikuti kursor tetikus pengguna.

Kami memerlukan javascript supaya kami dapat mengemas kini sifat tersuai yang kami perlukan untuk pekali yang menetapkan pergerakan logo di sepanjang X dan Y-Axes dalam CSS. Koefisien tersebut dikira dari kedudukan penunjuk pengguna. Saya sering menggunakan Greensock supaya saya boleh menggunakan gsap.utils.maprange. Tetapi, inilah versi vanila JavaScript yang melaksanakan Maprange:

 const mapRange = (inputLower, inputupper, outputLower, outputUpper) => {
  const input_range = inputupper - inputlower
  const output_range = outputupper - outputlower
  nilai pulangan => outputLower (((nilai - inputLower) / input_range) * output_range || 0)
}

bounds 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 ('-pekali-x', pos_x)
  document.body.style.setProperty ('-pekali-y', pos_y)
}

document.addeventListener ('pointermove', kemas kini)

Keajaiban berlaku di CSS-Land. Ini adalah salah satu manfaat utama menggunakan sifat tersuai dengan cara ini. JavaScript memberitahu CSS apa yang berlaku dengan interaksi. Tetapi, ia tidak peduli apa yang CSS lakukan dengannya. Itulah decoupling rad. Saya menggunakan coretan JavaScript ini dalam banyak demo saya atas sebab ini. Kami boleh mencipta pengalaman yang berbeza hanya dengan mengemas kini CSS.

Bagaimana kita melakukannya? Gunakan Calc () dan sifat tersuai yang dilengkapkan terus ke elemen .scene. Pertimbangkan gaya terkini ini untuk .scene:

 .scene {
  --Rotation-y: 75deg;
  --rotation-x: -14deg;
  Transform: Translate3D (0, 0, 100Vmin)
    RotateX (-16deg)
    Rotatey (28deg)
    rotateX (calc (var (-pekali-y, 0) * var (-putaran-x, 0deg)))
    rotatey (calc (var (-pekali-x, 0) * var (-putaran-y, 0deg)));
}

Membuat adegan berputar pada x dan paksi y berdasarkan pergerakan penunjuk pengguna. Tetapi kita boleh menyesuaikan tingkah laku ini dengan tweaking nilai-nilai untuk-rotation-x dan-rotation-y.

Setiap cuboid akan bergerak sendiri. Mereka dapat bergerak sama ada paksi x, y, atau z. Tetapi, kita hanya perlu menentukan satu transformasi. Kemudian kita boleh menggunakan sifat tersuai scoped untuk melakukan yang lain.

 .logo__square {
  Transform: Translate3D (
    calc (min (0, var (-pekali-x, 0) * var (-offset-x, 0)) * 1%),
    calc ((var (-pekali-y) * var (-offset-y, 0)) * 1%),
    calc ((var (-pekali-x) * var (-offset-z, 0)) * 1vmin)
  );
}
.logo__square-satu {
  --offset-x: 50;
  --offset-y: 10;
  --offset-z: -2;
}
.logo__square-dua {
  --offset-x: -35;
  --offset-y: -20;
  --offset-Z: 4;
}
.logo__square-tiga {
  --offset-x: 25;
  --offset-y: 30;
  --offset-Z: -6;
}

Itu akan memberi anda sesuatu seperti ini:

Dan kita boleh tweak ini ke kandungan hati kita sehingga kita mendapat sesuatu yang kita gembira dengan!

Menambah animasi intro ke campuran

Ok, saya fibbed sedikit dan mempunyai satu akhir (saya berjanji!) Cara kita dapat meningkatkan kerja kita. Bagaimana jika kita mempunyai beberapa animasi intro? Bagaimana dengan gelombang atau sesuatu yang mencuci dan mendedahkan logo?

Kita boleh melakukan ini dengan unsur-unsur pseudo elemen badan:

 : root {
  --Hue: 215;
  --initial-delay: 1;
  -kelajuan gelombang: 2;
}

Badan: Selepas,
badan: sebelum {
  Kandungan: '';
  Kedudukan: Mutlak;
  Ketinggian: 100VH;
  lebar: 100VW;
  Latar Belakang: HSL (var (-hue), 100%, calc (var (-ringan, 50) * 1%));
  Transform: Terjemahan (100%, 0);
  nama animasi: gelombang;
  Animasi-Peringkat: Calc (var (-kelajuan gelombang) * 1s);
  animasi-delay: calc (var (-delay awal) * 1s);
  Animasi-masa-fungsi: mudah-masuk;
}
badan: sebelum {
  -Kecacatan: 85;
  Animasi-masa-fungsi: mudah keluar;
}
@keyframes gelombang {
  dari {
    Transform: Terjemahan (-100%, 0);
  }
}

Sekarang, idea itu ialah logo DigitalOcean tersembunyi sehingga gelombang mencuci di atasnya. Untuk kesan ini, kita akan menghidupkan unsur -unsur 3D kita dari kelegapan 0. Dan kita akan menghidupkan semua sisi ke elemen 3D kita dari kecerahan 1 untuk mendedahkan logo. Kerana warna gelombang sepadan dengan logo, kita tidak akan melihatnya memudar. Juga, menggunakan mod-fill-mod: kedua-duanya bermakna unsur-unsur kita akan memanjangkan gaya kerangka key kami di kedua-dua arah.

Ini memerlukan beberapa bentuk garis masa animasi. Dan ini adalah di mana sifat tersuai dimainkan. Kita boleh menggunakan tempoh animasi kita untuk mengira kelewatan orang lain. Kami melihat ini dalam "Cara Membuat Pakej CSS 3D Togol" dan "Animasi Matryoshka Dolls dalam artikel CSS".

 : root {
  --Hue: 215;
  --initial-delay: 1;
  -kelajuan gelombang: 2;
  -kelajuan-kelajuan: 0.5;
  -Filter-Speed: 1;
}

.cylinder__segment,
.cuboid__side,
.logo__cap {
  Nama Animasi: Fade-In, Filter-in;
  Animasi-Peringkat: Calc (var (-Fade-Speed) * 1s),
    calc (var (-kelajuan penapis) * 1s);
  Animasi-Delay: Calc ((Var (-Awal-Delay) Var (-Wave-Speed)) * 0.75s),
    calc ((var (-awal-kelewatan) var (-kelajuan gelombang)) * 1.15s);
  Animasi-Fill-Mode: Kedua-duanya;
}

@KeyFrames Filter-in {
  dari {
    Penapis: Kecerahan (1);
  }
}

@KeyFrames Fade-in {
  dari {
    Kelegapan: 0;
  }
}

Bagaimana kita mendapat masa yang betul? Sedikit tinkering dan menggunakan "Inspektor Animasi" di Devtool Chrome pergi jauh. Cuba menyesuaikan masa dalam demo ini:

Anda mungkin mendapati bahawa masa pudar tidak perlu jika anda mahu logo berada di sana apabila gelombang telah berlalu. Dalam hal ini, cuba tetapkan pudar ke 0 dan khususnya, bereksperimen dengan pekali penapis dan pudar. Mereka berkaitan dengan 0.75s dan 1.15s dari kod di atas. Perlu menyesuaikan diri dan bermain di Inspektor Animasi Chrome untuk melihat bagaimana keadaan masa.

Itu sahaja!

Meletakkannya bersama -sama, kami mempunyai intro yang kemas untuk logo DigitalOcean 3D kami!

Dan, tentu saja, ini hanya satu pendekatan untuk membuat logo DigitalOcean dalam 3D dengan CSS. Jika anda melihat kemungkinan lain atau mungkin sesuatu yang dapat dioptimumkan lagi, jatuhkan pautan ke demo anda dalam komen!

Tahniah, sekali lagi, kepada pasukan trik CSS dan DigitalOcean untuk perkongsian baru mereka. Saya teruja untuk melihat di mana perkara pergi dengan pengambilalihan. Satu perkara yang pasti: CSS-Tricks akan terus memberi inspirasi dan menghasilkan kandungan yang hebat untuk masyarakat. ?

Atas ialah kandungan terperinci Membuat logo DigitalOcean dalam 3D dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!