Baktiyar Ablaikhan

3d

Source
Uiverse ↗
Author
vikas7754
Licence
MIT

Loading…

Code

<div class="tooltip-container">
  <div class="tooltip">
    <div class="profile">
      <div class="user">
        <div class="img">Ui</div>
        <div class="details">
          <div class="name">User</div>
          <div class="username">@username</div>
        </div>
      </div>
      <div class="about">500+ Connections</div>
    </div>
  </div>
  <div class="text">
    <a class="icon" href="https://freecodez.com/">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-linkedin">
          <svg viewBox="0 0 448 512" height="1em">
            <path
              d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
            ></path>
          </svg>
        </span>
      </div>
      <div class="text">LinkedIn</div>
    </a>
  </div>
</div>
Prompt

Build "3d", a other animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/vikas7754/evil-mule-52 (vikas7754, MIT).