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).