Ape realistica 3D

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

22 May 2025

<header>
  <div class="content-fit">
    <div class="logo">DDX</div>
    <nav>
      <ul>
        <li>Contacts</li>
        <li>Category</li>
        <li>Login</li>
      </ul>
    </nav>
  </div>
</header>
<div class="section" id="banner">
  <div class="content-fit">
    <div class="title" data-before="3D ANIMATION">3D ANIMATION</div>
  </div>
  <img src="https://assets.codepen.io/453571/flower.png" class="decorate" alt="" style="width: 50vw; bottom: 0; right: 0;">
  <img src="https://assets.codepen.io/453571/leaf.png" class="decorate" alt="" style="width: 30vw; bottom: 0; left: 0;">
</div>
<div class="section" id="intro">
  <div class="content-fit">
    <div class="number">01</div>
    <div class="des">
      <div class="title">3d animation design for website</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus voluptas a porro libero
        recusandae quae, aut ratione, incidunt laborum, necessitatibus similique enim doloremque ex.
        Laudantium obcaecati aspernatur doloremque illo beatae, maxime hic itaque consequatur nisi
        accusantium veritatis, voluptatem ratione! Placeat numquam nisi reiciendis harum quibusdam tempore
        eaque deleniti accusantium, veniam quae eos sed, asperiores laborum corporis odit mollitia
        consequatur adipisci? Quibusdam quis eos debitis non esse blanditiis laudantium rerum odit tempora?
        Corrupti maiores velit consequuntur cupiditate reiciendis similique provident repudiandae.</p>
    </div>
  </div>
</div>
<div class="section" id="description">
  <div class="content-fit">
    <div class="number">02</div>
    <div class="des">
      <div class="title">DEN DX</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus voluptas a porro libero
        recusandae quae, aut ratione, incidunt laborum, necessitatibus similique enim doloremque ex.
        Laudantium obcaecati aspernatur doloremque illo beatae, maxime hic itaque consequatur nisi
        accusantium veritatis, voluptatem ratione! Placeat numquam nisi reiciendis harum quibusdam tempore
        eaque deleniti accusantium, veniam quae eos sed, asperiores laborum corporis odit mollitia
        consequatur adipisci? Quibusdam quis eos debitis non esse blanditiis laudantium rerum odit tempora?
        Corrupti maiores velit consequuntur cupiditate reiciendis similique provident repudiandae.</p>
    </div>
  </div>
  <img src="https://assets.codepen.io/453571/leaf1.png" class="decorate" alt="" style="width: 70vw; bottom: 0; right: 0;">
</div>
<div class="section" id="contact">
  <div class="content-fit">
    <div class="number">03</div>
    <div class="des">
      <div class="title">CONTACT</div>
      <table>
        <tr>
          <td>Email</td>
          <td>test@gmail.com</td>
        </tr>
        <tr>
          <td>Phone</td>
          <td>+123.123.123</td>
        </tr>
        <tr>
          <td>Website</td>
          <td>zegarkidawida.com</td>
        </tr>
        <tr>
          <td>Youtube</td>
          <td>@zegarkidawida</td>
        </tr>
      </table>
      <div class="sign">Den DX</div>
    </div>
  </div>
</div>
<div id="container3D"></div>

CSS

@import url("https://fonts.cdnfonts.com/css/devil-breeze");
@import url("https://fonts.cdnfonts.com/css/poppins");
@import url("https://fonts.cdnfonts.com/css/bimbo");

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #1b1b1b;
  color: #eef8ce;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background-image: url(https://assets.codepen.io/453571/bg.avif),
    repeating-linear-gradient(
      to right,
      transparent 0 500px,
      #73814b33 500px 501px
    );
  background-size: 100%;
}
*::-webkit-scrollbar {
  width: 0;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-fit {
  width: min(1200px, 90vw);
  margin: auto;
  min-height: 100vh;
  position: relative;
  padding-block: 10em;
}
header {
  padding-block: 1em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10px;
  backdrop-filter: blur(20px);
  z-index: 100;
  background-color: #1b1b1b11;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 500px,
    #eee1 500px 501px
  );
}
header .content-fit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: unset !important;
  padding-block: unset !important;
}
header .content-fit nav ul {
  display: flex;
  gap: 2em;
}

#banner .title {
  color: #d1ff48;
  font-size: 11em;
  font-family: "devil breeze";
  font-weight: bold;
  position: relative;
  overflow: visible;
  text-align: center;
}
#banner .title::before {
  content: attr(data-before);
  position: absolute;
  z-index: -1;
  color: oklch(0.78 0.17 80.01 / 0.19);
  mask: linear-gradient(
    to bottom,
    #000 -80%,
    oklch(0 0 0/0),
    #000,
    oklch(0 0 0/0) 200%
  );
  transform: scaleY(-1) translateY(-0.44lh);
}
.section .decorate {
  position: fixed;
  z-index: -100;
  pointer-events: none;
}
#intro .content-fit {
  display: flex;
  gap: 30%;
  justify-content: space-between;
  align-items: center;
}
.section .number {
  font-family: "devil breeze";
  font-size: 15em;
  font-weight: bold;
}
.section .content-fit .title {
  font-family: "devil breeze";
  font-size: 5em;
  font-weight: bold;
}
#description .content-fit {
  padding-right: 30%;
}
#description .number {
  font-size: 5em;
}
#description .title {
  font-size: 7em;
  font-weight: 500;
}
#contact .content-fit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#contact table {
  width: min(800px, 90vw);
  padding-top: 2em;
  font-size: 2em;
  margin: auto;
}
#contact table td {
  padding-block: 0.5em;
  border-bottom: 1px dashed #445022;
}
#contact table td:nth-child(1) {
  text-align: left;
  font-weight: 500;
}
#contact table td:nth-child(2) {
  text-align: right;
  font-weight: 200;
}
#contact .sign {
  font-size: 10em;
}
#container3D {
  position: fixed;
  inset: 0;
  /* background-color: red; */
  z-index: 100;
  pointer-events: none;
}
@media screen and (max-width: 1023px) {
  #banner .title {
    font-size: 5em;
  }
  #intro .content-fit {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #banner .title {
    font-size: 3em;
  }
  #intro .content-fit {
    flex-direction: column;
  }
  .section .number {
    font-size: 5em;
  }
  .section .content-fit .title {
    font-size: 2em;
  }
  #description .content-fit {
    padding-right: 0;
  }
  #contact table {
    font-size: 1em;
  }
  #contact .sign {
    font-size: 2em;
  }
  #container3D {
    position: sticky;
  }
}

Ape realistica 3D

Consigliato

Sito web 3D

Un codice di ytr3d3

Interfaccia utente 3D Ripple

HTML

CSS

JS

Consigliato

Sito web 3D

Un codice di ytr3d3

Interfaccia utente 3D Ripple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS